Jquery UI autocomplete. How to write the results inside a div using innerHTML?

Question

I have an autocomplete field into my website. I just want to display the results inside a -div- tag instead the popup window that the plugin opens natively.

I search

Answer 1

As j08691 says, you have to handle the open event of the widget. However, since you also want to select the items in the #results element, copying them will not be enough.

I would suggest you reparent the whole autocompletion menu under your #results element instead, and reset its position style attribute to static so it remains in place:

$("#tags").autocomplete({
    source: availableTags,
    open: function() {
        $(this).autocomplete("widget")
               .appendTo("#results")
               .css("position", "static");
    }
});

You can see the results in this update to your fiddle.