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

Posted 2023-03-05

【中文标题】重新定位 Jquery UI 自动完成结果框

【英文标题】：Re-positioning Jquery UI Autocomplete Results Box

【发布时间】：2011-09-10 09:04:07

【问题描述】：

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

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

【参考方案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