重新定位 Jquery UI 自动完成结果框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6270792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Re-positioning Jquery UI Autocomplete Results Box
提问by JP1971
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.
我正在使用 Jquery UI 自动完成插件作为一个直接的搜索词建议工具。除了我无法移动结果框之外，它已启动并运行，没有任何问题。我基本上需要将它向左移动 20 个像素，向下移动 4 个像素。我试图覆盖 Jquery UI CSS，但无法重新定位框。
Any help from someone experienced with this issue would be greatly appreciated.
对此问题有经验的人的任何帮助将不胜感激。
回答by Andrew Whitaker
Here's one way you could do it, tapping into the openevent and changing the position of the menu when that event occurs:
这是您可以做到的一种方法，点击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" });
}
});
I'm also using the appendTooption to make finding the ulthat contains the menu easily. You could do it without this option though.
我还使用该appendTo选项来轻松查找ul包含菜单的 。不过，您可以在没有此选项的情况下执行此操作。
Here's a working example: http://jsfiddle.net/9QmPr/
这是一个工作示例：http: //jsfiddle.net/9QmPr/
回答by jensgram
This can be easily achieved via the positionoption, specifically the offsetproperty:
这可以通过position选项轻松实现，特别是offset属性：
$('#myField').autocomplete({
source: …,
position: {
offset: '20 4' // Shift 20px to the left, 4px down.
}
});
回答by goksel
Something like this would work too
像这样的东西也可以
open : function(){
$(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
},
回答by Savickii Stanislav
It seems better to use this options
使用此选项似乎更好
appendTo: "#autocomplete_target_wrapper",
menudocking: {
menucorner: "right top",
inputcorner: "right bottom",
collision: "none"
}
Official link https://forum.jquery.com/topic/autocomplete-menu-docking-position
官方链接 https://forum.jquery.com/topic/autocomplete-menu-docking-position
