blocks|key|874406|text|以下是一种方法，点击open事件，并在该事件发生时更改菜单的位置：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|874407|$("#autocomplete").autocomplete({
++++appendTo:+"#results",
++++open:+function()+{
++++++++var+position+=+$("#results").position(),
++++++++++++left+=+position.left,+top+=+position.top;

++++++++$("#results+>+ul").css({left:+left+%2B+20+%2B+"px",
++++++++++++++++++++++++++++++++top:+top+%2B+4+%2B+"px"+});

++++}
});|code-block|syntax|javascript|874408|我还使用了appendTo选项来方便地查找包含菜单的ul。不过，您可以在没有此选项的情况下完成此操作。|874409|下面是一个有效的示例：http://jsfiddle.net/9QmPr/|874410|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9QmPr/^0|A|4|0|0|5|8|Q|2|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Here's one way you could do it, tapping into the <code>open</code> event and changing the position of the menu when that event occurs:

<pre><code>$("#autocomplete").autocomplete({
 appendTo: "#results",
 open: function() {
 var position = $("#results").position(),
 left = position.left, top = position.top;

 $("#results &gt; ul").css({left: left + 20 + "px",
 top: top + 4 + "px" });

 }
});
</code></pre>

I'm also using the <code>appendTo</code> option to make finding the <code>ul</code> that contains the menu easily. You could do it without this option though.

Here's a working example: <a href="http://jsfiddle.net/9QmPr/">http://jsfiddle.net/9QmPr/</a>

blocks|key|657191|text|像这样的东西也行得通|type|unstyled|depth|inlineStyleRanges|entityRanges|data|657192|open+:+function(){
++++++++$(".ui-autocomplete:visible").css({top:"%2B=5",left:"-=2"});
++++},|code-block|syntax|javascript|657193|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Something like this would work too

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

blocks|key|657233|text|这可以通过position+option轻松实现，特别是通过offset+property|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|657234|$('#myField').autocomplete({
++++source:+…,
++++position:+{
++++++++offset:+'20+4'+//+Shift+20px+to+the+left,+4px+down.
++++}
});|code-block|syntax|javascript|657235|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/autocomplete/#option-position|1|http://docs.jquery.com/UI/Position#option-offset^0|5|8|U|6|5|F|0|U|F|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

This can be easily achieved via the <a href="http://jqueryui.com/demos/autocomplete/#option-position" rel="noreferrer"><code>position</code> option</a>, specifically the <a href="http://docs.jquery.com/UI/Position#option-offset" rel="noreferrer"><code>offset</code> property</a>:

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

blocks|key|874504|text|使用此选项似乎更好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|874505|appendTo:+"#autocomplete_target_wrapper",
menudocking:+{
++++menucorner:+"right+top",
++++inputcorner:+"right+bottom",
++++collision:+"none"
}|code-block|syntax|javascript|874506|官方链接https://forum.jquery.com/topic/autocomplete-menu-docking-position|offset|length|874507|entityMap|0|LINK|mutability|MUTABLE|url|https://forum.jquery.com/topic/autocomplete-menu-docking-position^0|0|0|4|1T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

It seems better to use this options

<pre><code>appendTo: "#autocomplete_target_wrapper",
menudocking: {
 menucorner: "right top",
 inputcorner: "right bottom",
 collision: "none"
}
</code></pre>

Official link
<a href="https://forum.jquery.com/topic/autocomplete-menu-docking-position" rel="nofollow">https://forum.jquery.com/topic/autocomplete-menu-docking-position</a>

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.

Any help from someone experienced with this issue would be greatly appreciated.

Re-positioning Jquery UI Autocomplete Results Box

我正在使用Jquery UI Autocomplete插件作为一个直接的搜索词建议工具。它已经启动并运行，没有任何问题，只是我不能移动结果框。我基本上需要将它向左移动20个像素，向下移动4个像素。我试图覆盖Jquery UI CSS，但无法重新定位该框。对此问题有经验的人提供的任何帮助都将不胜感激。

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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