jQuery autocomplete UI- I'd like it to start the search onfocus without the user having to type anything

Question

jQuery autocomplete UI - I'd like to start the search "onfocus" and immediately show the list of choices when the user tabs or clicks into the search field without the user having to type anything.

The default behavior seems to requires the user to enter a character or a down arrow to start the ball rolling and start the search and get the values even when I set the number of character required to zero.

$( "#contact" ).autocomplete({
    source: 'remote.php',
    minLength: 0
});

thanks!

Answer 1

$("#contact").focus(function() {
    if ($(this).val().length == 0) {
        $(this).autocomplete("search");
    }
});

Make sure your autocomplete's minLength is 0.

Answer 2

I found that this code was a little cleaner and element specific.

 $(<selector>).autocomplete({
            minLength: 0,
            delay: 500,
            source: funcDataLookUp,
            open: function() { $(this).attr('state', 'open'); },
            close: function () { $(this).attr('state', 'closed'); }
        }).focus(function () {
            if ($(this).attr('state') != 'open') {
                $(this).autocomplete("search");
            }
        });

Answer 3

A bit more complicated than Emmett's answer, but...

• Pops up list on focus even when box already contains text
• Avoids re-popping up list after clicking an item

Here it is:

var closing = false;

$('#contact').autocomplete({
    source: 'remote.php',
    minLength: 0,
    close: function()
    {
        // avoid double-pop-up issue
        closing = true;
        setTimeout(function() { closing = false; }, 300);
    }
})
.focus(function() {
    if (!closing)
        $(this).autocomplete("search");
});

Answer 4

Try binding the focus with autocomplete.

$("#contact").autocomplete({
        source: 'remote.php',
        minLength: 0
    }).bind('focus', function () {
        $(this).autocomplete("search");
    });

Check out my sample JSFiddle.