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 option轻松实现，特别是offset property：

$('#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"});
    },

Answer 4

使用此选项似乎更好

appendTo: "#autocomplete_target_wrapper",
menudocking: {
    menucorner: "right top",
    inputcorner: "right bottom",
    collision: "none"
}

官方链接 https://forum.jquery.com/topic/autocomplete-menu-docking-position

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

4 个答案: