jquery-ui – 如何将jquery自动完成结果返回给单独的div?

我发现here可以覆盖其中一个自动完成事件.但有人可以请我提供如何做同样的例子吗?
appendTo选项确实按预期工作,如果你在DOM检查,< ul>结果元素将附加到元素.但是,由于jQueryUI生成的绝对定位,列表仍然直接出现在< input>下.

也就是说,您可以覆盖内部_renderItem以直接将结果附加到完全不同的元素,例如:

HTML

<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>

JavaScript的

$('input').autocomplete({
    search: function(event, ui) {
        $('.test ul').empty();
    },
    source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.test ul'));
};

我还创建了一个demo以证明这一点.请注意,最新的jQuery库还没有完全测试jQueryUI,所以我使用的是之前的版本,它允许我选择直接使用jsFiddle选项包含jQueryUI.

翻译自:https://stackoverflow.com/questions/7941280/how-to-return-jquery-autocomplete-result-to-the-separate-div

转载注明原文:jquery-ui – 如何将jquery自动完成结果返回给单独的div?