重新定位Jquery UI自动完成结果框

Question

我使用Jquery UI自动完成插件作为直接搜索术语建议工具.它启动并运行没有问题,除了我无法移动结果框.我基本上需要向左移动20个像素,向下移动4个像素.我试图覆盖Jquery UI CSS,但无法重新定位该框.

任何有此问题经验的人的帮助将不胜感激.

Answer 1

这是你可以做到的一种方式,open当事件发生时,点击事件并更改菜单的位置:

$("#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包含菜单的菜单.你可以在没有这个选项的情况下做到.

这是一个有效的例子:http://jsfiddle.net/9QmPr/

Answer 2

这可以通过position选项轻松实现,特别是offset属性:

$('#myField').autocomplete({
    source: …,
    position: {
        offset: '20 4' // Shift 20px to the left, 4px down.
    }
});

Answer 3

像这样的东西也会起作用

open : function(){
        $(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
    },