如何将jquery自动完成结果返回到单独的div？

Question

我在这里发现要覆盖其中一个自动完成事件.但有人可以请我提供如何做同样的例子吗？

Answer 1

该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'));
};

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

Answer 2

<div class="test">Output goes here:<br/></div>

<script>
  $("input#autocomplete").autocomplete({
    source: ["something", "something-else"],
    appendTo: ".text",
    position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
  });
</script>