jQueryUI 自动完成 - 将搜索结果与 DOM 中的输入相邻答案

【问题标题】：jQueryUI autocomplete - place search results adjacent to input in DOMjQueryUI 自动完成 - 将搜索结果与 DOM 中的输入相邻
【发布时间】：2010-12-06 03:58:59
【问题描述】：

我正在使用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 css jquery-ui dom

【解决方案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);       
    }
});

这通过将自动完成框移动到输入右侧来定位小部件，并通过将小部件附加到 <input> 所属的同一 <div> 来解决翻转问题。

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

编辑：这个解决方案可以工作，特别是对于旧版本的 jQuery UI，但是下面 Brian 的回答是一个更好的解决方案。

【讨论】：

太棒了。谢谢，安德鲁。 :) 我认为这也是 jQuery UI 本身应该做的事情！
如果确实是意外行为，我已经为此问题创建了一张票：bugs.jqueryui.com/ticket/6724

【解决方案2】：

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

使用autocomplete的appendTo选项，即

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

你可以看到this in action on jsFiddle。

【讨论】：

这太棒了，我永远不会知道这个选项存在！我想你仍然需要做一些诡计才能让盒子出现在目标<input>下方之外的某个地方@
@Andrew：很棒不是吗？同样，定位盒子也没有任何技巧——最新版本的autocomplete 也采用position 参数——参见github.com/jquery/jquery-ui/blob/master/ui/…！