How to return jquery autocomplete result to the separate div?

Question

I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?

Answer 1

The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.

That said, you can override the internal _renderItem to directly append results to a completely different element, for example:

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

I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.

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>