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

jQuery autocomplete UI - I'd like to start the search "onfo开发者_开发知识库cus" 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!

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");
});

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");
            }
        });

Try binding the focus with autocomplete.

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

Check out my sample JSFiddle.

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

Make sure your autocomplete's minLength is 0.

This solution didn't exactly work for me because the autocomplete results box would pop back up once more after selecting the desired result. This was because the .focus method was executed before the close: event.

Additionally, according to the code in that answer, once the box closed, it wouldn't open back up because the closing variable stayed true due toclose: being executed after .focus.

The following code resolved those two issues (note the variable closing is set to false in the close: event):

var closing = false;

$(function() {$(".autocomplete").autocomplete({
    source: 'remote.php',
    minLength: 0,
    open: function(){
        closing=true; },
    close: function(){
        closing = false;
        }
})
    .focus(function(){
        if ((!closing) && ($(this).val() !== "")){
            $(this).autocomplete("search");
        }
    });
})

this solution not working for me, but this:

$('#contact').autocomplete({
source: 'remote.php',
minLength: 0
           }).focus(function(){
if (this.value == "")
$(this).trigger('keydown.autocomplete');
});

works good (source: jquery forum)

JQUERY actually suggests this method

http://api.jqueryui.com/autocomplete/#method-search

$('.yourclass').autocomplete({
   minLength: 0
   ,source:['blah','andblahagain']
   ,focus: function() {
     $(this).autocomplete("search", "");
   },
});

basically you use minLength:0 and the focus event with a search for "".