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

【问题标题】：Re-positioning Jquery UI Autocomplete Results Box重新定位 Jquery UI 自动完成结果框
【发布时间】：2011-09-10 09:04:07
【问题描述】：

我正在使用 Jquery UI 自动完成插件作为一个直接的搜索词建议工具。除了我无法移动结果框外，它可以正常运行。我基本上需要将它向左移动 20 像素，向下移动 4 像素。我试图覆盖 Jquery UI CSS，但无法重新定位框。

非常感谢有此问题经验的人提供任何帮助。

【问题讨论】：

标签： jquery css jquery-ui jquery-plugins autocomplete

【解决方案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/

【讨论】：

当我将此代码合并到我正在处理的项目中时，我收到 this.menu is undefined 错误。
@JP1971：除非您发布一些代码，否则我无法帮助您。您可能想提出另一个问题以获得更好的结果。
如果我想调整<ul> 的大小，使其宽度与<input> 的宽度相同，该怎么办？
你试过了吗：$("#results > ul").width($("#results").width());？
@AndrewWhitaker，我尝试了您的解决方案，它适用于 FF、Chrome 和 IE8-9，但不适用于 IE7，我是这样做的，appendTo: "#results", open: function(){ var position = $("#results").position(), left = position.left, top = position.top; $("#results > ul").css({left: (left + 15) + "px", top: (top + 30) + "px", width: (206) + "px", float: "left"}); } 我做错了什么吗？我的意思是，在 IE7 上，与其他浏览器不同，我的自动完成结果并不位于我的 #results div 下方。

【解决方案2】：

这可以通过position option，特别是offset property轻松实现：

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

【讨论】：

英雄！我在打开仓位后发现了这个。
请务必在此处查看位置选项的所有可用设置api.jqueryui.com/position

【解决方案3】：

类似的方法也可以

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

【讨论】：

完美。这对我使用 1.12.1 有效，而 position 属性不起作用。
为我工作。谢谢。

【解决方案4】：

使用这个选项似乎更好

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

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

【讨论】：