jQuery autocomplete UI- I'd like it to start t

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

Try binding the focus with autocomplete.

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

Check out my sample JSFiddle.

Answer 2

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)

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

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 5

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

Answer 6

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 "".