jQueryUI自动完成 - 将搜索结果与输入框相邻地放置在DOM中。

Question

jQueryUI自动完成 - 将搜索结果与输入框相邻地放置在DOM中。

4

我正在使用jQueryUI自动完成，但出于以下原因，我希望将搜索结果移动到执行搜索的输入标签旁边的DOM中。

可以在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>

问题在于当鼠标悬停在自动完成选项上时，包含自动完成输入标签的元素不再处于“mouseover”状态，并且根据CSS规则，输入标签会随其容器一起消失。这不是期望的行为；我希望在突出显示自动完成选项时保持输入标签可见。

我希望并期望将自动完成元素移动到输入标签旁边的DOM中（即x = $（“#X”）; x.append（x.autocomplete（'widget'））），因此CSS规则将保持输入及其父容器可见。然而，这并不起作用。

我将感激任何有关如何实现CSS和jQueryUI混合的想法。

谢谢。

布莱恩

- Brian M. Hunt

2个回答

2

以下是一种可能比Andrew Whitaker更可取的答案（根据我发起的票证：http://bugs.jqueryui.com/ticket/6724）：

使用自动完成的appendTo选项，即：

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

您可以在 jsFiddle 上查看此示例的实际效果。

- Brian M. Hunt

太棒了，我从来不知道这个选项的存在！我猜你仍然需要做一些小技巧才能让该框显示在除目标<input>直接下面之外的其他位置。 - Andrew Whitaker

@Andrew：是不是很棒？而且，放置框的位置也没有什么诡计——最新版本的autocomplete还接受一个position参数——请参见https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js！ - Brian M. Hunt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Whitaker · Accepted Answer

这似乎是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的答案是更好的解决方案。