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

时间:2013-10-01 14:08:15

标签: javascript jquery jquery-ui

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

JS

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

1 个答案:

答案 0 :(得分:1)

我认为这是因为捕手div向右浮动。不确定。尝试删除浮动并查看。

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

你可以覆盖内部

_renderItem

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