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 searched already for solutions for this in other posts, but what they do is to change the position of the "popup" window, and what I want is to replace the content of the -div- with the results, not to put the popup over it. Any advice will be very appreciated. This is the code that I have: ``` jQuery UI Autocomplete - Default functionality

Accepted Answer

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.

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

Solution

Problem