Question

我正在使用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的混合，我感激不尽。

谢谢。

布赖恩

Answer 1

这似乎应该在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>来解决翻转问题。

http://jsfiddle.net/U2B9f/1/

编辑：此解决方案可行，尤其适用于旧版本的jQuery UI，但Brian的答案是更好的解决方案。

Answer 2

这是一个可能比Andrew Whitaker更好的答案（根据我开始的票：http://bugs.jqueryui.com/ticket/6724）：

使用autocomplete的appendTo选项，即

$("#X").autocomplete({
  appendTo: $(".B"),
  source: ['abc', 'def', 'ghi'],
});

您可以看到this in action on jsFiddle。

jQueryUI自动完成 - 将搜索结果放在DOM中的输入旁边

2 个答案: