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

Use autocomplete's open event like in this jsFiddle example.

    open: function(e, ui) {
        var list = '';
        var results = $('ul.ui-autocomplete.ui-widget-content a');
        results.each(function() {
            list += $(this).html() + '<br />';
        });
        $('#results').html(list);
    }

Answer 2

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.