jQueryUI自动完成将菜单附加到错误的元素答案

【问题标题】：jQueryUI Autocomplete appending menu to wrong elementjQueryUI自动完成将菜单附加到错误的元素
【发布时间】：2013-10-01 14:08:14
【问题描述】：

我有一个带有 jQueryUI 自动完成功能的文本框。我想将结果附加到 ID 为#catcher 的 div 中。目前，结果仅直接附加在文本输入下方。您可以看到我尝试在自动完成初始化中指定 appendTo 选项的位置，当我将 appendTo 选项写入控制台时，它会打印正确的 id，但结果并未附加到那里。为什么自动完成的结果被附加到错误的地方？

 $(document).ready(function ()
            {

                $('#nameAutoComplete').autocomplete(
                {

                    source: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
                    appendTo: '#catcher'

                });
                //prints #catcher to the console
                console.log($('#nameAutoComplete').autocomplete('option', 'appendTo'));


            });

HTML

<form id="form1" runat="server">
    <div>
    <input name="nameAutoComplete" type="text" id="nameAutoComplete" />
    //results should be appended here 
    <div  id="catcher"></div>
    </div>
    </form>

CSS

#catcher
{
    border: 3px dashed #ccc;
    width:250px;
    min-height:500px;
    float:right;
}

【问题讨论】：

确保 ID 在整个页面中是唯一的。
他们是。目前页面上没有其他内容。
它实际上正在正常工作。如果您在使用自动完成功能时检查 catcher 元素，您会看到附加到它的列表。您的 CSS 样式让您产生了不同的想法。
@MelanciaUK 这很奇怪。如果用户需要从带有自动完成标签的文本框中查看页面另一侧的自动完成结果怎么办？此外，您如何在搜索处于活动状态时检查结果的 HTML
检查这个：stackoverflow.com/questions/12234802/…

标签： javascript jquery jquery-ui

【解决方案1】：

我认为这是因为捕手 div 向右浮动。没有把握。试着去掉浮动看看。

我已经为此创建了一个小提琴。不是它附加到捕手元素。但不确定追加后你想要什么行为。也许你可以从那里起飞。小提琴：http://jsfiddle.net/FbRFj/

你可以覆盖内部

_renderItem

直接将结果附加到完全不同的元素，

【讨论】：

我在文档中看到了类似的内容，但我当时考虑得不够仔细，并认为这就像告诉计算机要附加到哪个元素一样简单。不过，这会有所帮助，谢谢。