我正在使用 jQueryUI's autocomplete ，但出于以下原因，我想将搜索结果移动到 DOM 中，紧挨着进行搜索的输入标签。
最容易看到this on jsFiddle ，但本质上演示该问题的代码如下所示:
<html> <head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> google.load("jquery", "1.4");
google.load("jqueryui", "1.8"); </script>
<script>
$(function() {
$("#X").autocomplete({
source: ['abc', 'def', 'ghi']
});
});
</script>
<style type="text/css">
.B { display: none; }
.A:hover .B { display: block; }
</style>
</head> <body>
Hello
<div class='A'>
select:
<div class='B'>
<input id='X' />
</div>
</div>
World
</body> </html>
问题是，当人们将鼠标悬停在自动完成选项上时，包含自动完成输入标签的元素不再处于“鼠标悬停”状态，并且根据 CSS 规则，输入标签与其容器一起消失。这不是期望的行为；我想在突出显示自动完成选择时保持输入标签可见。
我希望并期望可以将自动完成元素移动到输入标签旁边的 DOM(即 x = $("#X"); x.append(x.autocomplete( 'widget')))，因此 CSS 规则将使输入及其父对象保持可见。唉，这行不通。
如果有任何关于如何实现 CSS 和 jQueryUI 混合的想法，我将不胜感激。
谢谢。
布莱恩
最佳答案
这似乎应该在 jQuery UI 中得到原生支持!无论如何，这是我认为可行的方法:
$("#X").autocomplete({
source: ['abc', 'def', 'ghi'],
open: function($event, ui) {
var $widget = $("ul.ui-autocomplete");
var $input = $("#X");
var position = $input.position();
$("div.B").append($widget);
$widget.css("left", position.left + $input.width());
$widget.css("top", position.top);
}
});
这通过将自动完成框移动到输入的右侧来定位小部件，并通过将小部件附加到相同的 <div> 来解决翻转问题。 <input>属于。
编辑:此解决方案会起作用，尤其是对于旧版本的 jQuery UI，但下面 Brian 的回答是更好的解决方案。
关于jQueryUI 自动完成 - 将搜索结果与 DOM 中的输入相邻放置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4363080/