我正在使用Jquery UI Autocomplete插件来创建一个简单的搜索词建议工具。 它已经运行良好,除了我无法移动结果框。 我基本上需要将其向左移动20像素并向下移动4像素。 我尝试覆盖Jquery UI CSS,但未能重新定位该框。
希望有经验的人能提供帮助,谢谢。
我正在使用Jquery UI Autocomplete插件来创建一个简单的搜索词建议工具。 它已经运行良好,除了我无法移动结果框。 我基本上需要将其向左移动20像素并向下移动4像素。 我尝试覆盖Jquery UI CSS,但未能重新定位该框。
希望有经验的人能提供帮助,谢谢。
下面是一种方法,通过触发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/
这可以通过 position
选项 来轻松实现,具体来说是通过 offset
属性:
$('#myField').autocomplete({
source: …,
position: {
offset: '20 4' // Shift 20px to the left, 4px down.
}
});
这样做也可以起作用
open : function(){
$(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
},
似乎最好使用这些选项
appendTo: "#autocomplete_target_wrapper",
menudocking: {
menucorner: "right top",
inputcorner: "right bottom",
collision: "none"
}
官方链接 https://forum.jquery.com/topic/autocomplete-menu-docking-position
<ul>
大小,使其宽度与我的<input>
相同怎么办? - Tsukimoto Mitsumasa$("#results > ul").width($("#results").width());
? - Andrew Whitaker$("#results > ul").css({left: (left + 15) + "px", top: (top + 30) + "px", width: (206) + "px", float: "left"}); }`
我做错了什么吗?我的意思是,在IE7上,我的自动完成结果没有位于#results div下面,而是其他浏览器上的位置。 - Tsukimoto Mitsumasa