Question

I have an input box. On mouseover, I would like a list is to be displayed, and when the user click on one item of the list, the input box is populated with that item. The thing is I do not want to use a combo-box. The input has to look like an input box. No arrow… My idea was to use the JQuery UI autocomplete. So my question is as follows: Is there a way to have all the items from the autocomplete to show-up on mouse over. (I know that the autocomplete is triggered on keyup…….) I am open to other suggestion but again, the input box has to stay an input box. Thank you in advance for your replies. Cheers. Marc.

http://jsfiddle.net/kjAfD/

My HTML:

<input type="text" id="lst"/>​

My JS:

$(function() {
        var availableTags = [
            "Paris",
            "Barcelona",
            "Tokyo",
            "New-York",
            "Berck"
        ];
        $( "#lst" ).autocomplete({
            source: availableTags
        });
    });​

Answer 1

$(function() {
    var availableTags = [
        "Paris",
        "Barcelona",
        "Tokyo",
        "New-York",
        "Berck"
        ];
    $("#lst").autocomplete({
        source: availableTags,
        minLength: 0
    }).focus(function() {
        if (this.value == "") $(this).trigger('keydown.autocomplete');
    });
});

Here is another way:

$(function() {
    var availableTags = [
        "Paris",
        "Barcelona",
        "Tokyo",
        "New-York",
        "Berck"
        ];
    $("#lst").autocomplete({
        source: availableTags,
        minLength: 0
    }).focus(function() {
        if (this.value == "") {
            $(this).autocomplete("search");
        }
    });
});

EDIT: adding mouseover example

$(function() {
    var availableTags = [
        "Paris",
        "Barcelona",
        "Tokyo",
        "New-York",
        "Berck"
        ];
    $("#lst").autocomplete({
        source: availableTags,
        minLength: 0
    }).mouseover(function() {
        $(this).autocomplete("search");
    });
});