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

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

jquery css jquery-ui dom

jQueryUI自动完成-将搜索结果放置在DOM中输入的旁边,jquery,css,jquery-ui,dom,Jquery,Css,Jquery Ui,Dom,我正在使用，但出于以下原因，我希望将搜索结果移动到进行搜索的输入标记旁边的DOM中这是最容易看到的，但本质上，演示问题的代码如下所示： <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="ht

我正在使用，但出于以下原因，我希望将搜索结果移动到进行搜索的输入标记旁边的DOM中

这是最容易看到的，但本质上，演示问题的代码如下所示：

<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>


load（“jquery”，“1.4”）；
google.load（“jqueryui”，“1.8”）；
$（函数（）{
$（“#X”）.自动完成({
资料来源：['abc'，'def'，'ghi']
});
});
.B{显示：无；}
.A:hover.B{display:block；}
你好
选择：
世界

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

我希望并期望能够将autocomplete元素移动到输入标记旁边的DOM中（即

x=$（“#x”）；x.append（x.autocomplete（'widget'））

），因此CSS规则将保持输入及其父项可见。唉，这行不通

如果您能想到如何实现CSS和jQueryUI的混合，我将不胜感激

多谢各位

Brian

这似乎是jQueryUI本机应该支持的东西！不管怎么说，我认为有一个办法可以奏效：

$("#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);       
    }
});

这通过将自动完成框移动到输入的右侧来定位小部件，并通过将小部件附加到

所属的相同

来解决滚动问题

编辑：此解决方案将有效，特别是对于较旧版本的jQuery UI，但Brian下面的答案是一个更好的解决方案。

以下是一个可能比Andrew Whitaker的答案更好的答案（根据我开始的问题：）：

使用的

appendTo

选项，即

你可以看到。

太棒了。谢谢，安德鲁我认为这也是jQueryUI本机应该做的事情！如果这确实是非故意的行为，我已经为这个问题创建了一张罚单：这太棒了，我永远不会知道这个选项的存在！我想你还得耍点小把戏才能让盒子出现在目标下方的某个地方。安德鲁：太棒了，不是吗？同样，放置长方体也没有什么诡计——

autocomplete

的最新版本也使用了一个

position

参数——请参见！

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