JQery UI自动完成在JQ UI V1.8.6中附加到body而不是给定对象

Question

我已经在我的网页上使用jquery自动完成了一段时间,但是在从1.8rc3更新jquery ui到版本1.8.6后,自动完成ul对象现在被附加到正文而不是直接在给定的选择器之后.

下面的代码当然无效,它只是突出了我的问题.

在1.8rc3

   $("#myinput").autocomplete(.....

   <input id="myinput"/> 
   <ul id="autocomplete"></ul>
   <div>Loads of other content</div>
   <div>Loads of other content</div>
   <div>Loads of other content</div>
   </body>

在1.8.6

   $("#myinput").autocomplete(.....

   <input id="myinput"/> 
   <div>Loads of other content</div>
   <div>Loads of other content</div>
   <div>Loads of other content</div>
   <ul id="autocomplete"></ul>   
   </body>

所以我的问题是,有没有办法让自动完成在我给定的选择器之后附加而不是附加到正文？

Answer 1

你可以使用选项"appendTo"

$("#input").autocomplete({
    appendTo: $("#input").next()
});

但是,这只能附加到您怀疑的某个容器中.如果您希望能够在输入后立即附加自动完成,那么您必须直接调整自动完成源(更改appendTo()for after())

Answer 2

最初的答案帮助我找到了一个更简单的解决方案.

我的情况有点不同:我试图在(Bootstrap)模式中使用自定义自动完成功能.另外,我使用的是更新版本的jquery-ui(1.11.4).希望我的回答能为任何获得此帖的人增添价值.

根据选项appendTo 的文档:

当值为null时,将检查输入字段的父级是否为ui-front类.如果找到具有ui-front类的元素,则菜单将附加到该元素.

通过在父元素(在我的例子中,模态)中添加类ui-front,我能够从幕后带入下拉列表并进入模态.

因此,您可以将输入包装在容器中,并将类ui-front添加到容器中.