重新定位jQuery UI的自动完成结果框中 [英] Re-positioning Jquery UI Autocomplete Results Box

问题描述

我使用jQuery UI的自动完成功能插件，一个简单的搜索词建议工具。它是由与不同之处在于我不能移动的结果框没有问题运行。我基本上需要将其移动20个像素的左侧和4个像素向下。我试图覆盖jQuery UI的CSS，但一直没能重新定位框。

I am using the Jquery UI Autocomplete plugin for a straight forward search term suggestion tool. It is up and running with no problems except that I cannot move the results box. I basically need to move it 20 pixels to the left and 4 pixels down. I have attempted to overwrite the Jquery UI CSS, but have not been able to reposition the box.

从别人的任何帮助经历过这个问题将大大AP preciated。

Any help from someone experienced with this issue would be greatly appreciated.

推荐答案

下面是你可以做这件事，窃听到打开事件，并改变菜单的位置当事件发生时：

Here's one way you could do it, tapping into the open event and changing the position of the menu when that event occurs:

$("#autocomplete").autocomplete({
    appendTo: "#results",
    open: function() {
        var position = $("#results").position(),
            left = position.left, top = position.top;

        $("#results > ul").css({left: left + 20 + "px",
                                top: top + 4 + "px" });

    }
});

我还使用了 appendTo 选项，以使找到 UL ，很容易包含菜单。你可以做没有这个选项虽然。

I'm also using the appendTo option to make finding the ul that contains the menu easily. You could do it without this option though.

下面是一个工作示例： http://jsfiddle.net/9QmPr/

Here's a working example: http://jsfiddle.net/9QmPr/

这篇关于重新定位jQuery UI的自动完成结果框中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！