How to customize jquery autocomplete for displaying in a DIV

Question

I'm just wondering, I have used autocomplete plugins before but the example on jquery's website seems very simple and useful:

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});



    <div class="demo">
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>
</div>

However, the results posted are each in input boxes. And when you click away from the results they disappear.

1) I need the results to not disappear, as long as there is text in the input that matches some values in the array, it needs to always display it.

2) The results should appear as divs. I don't need the functionality of clicking on the option and having it appear in the textbox. I'm really just trying to make a dynamic instant search.

Regards, taylor.

Answer 1

Funny hack to keep the auto-complete open (this doesn't answer your question but maybe it can be useful in getting there):

http://jsfiddle.net/WUxPd/

$("#tags").autocomplete({
    source: availableTags,
    close: function(event, ui) {
        $('.ui-autocomplete').css('display', 'block')
    }
    });