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!

Joo

Answer 1

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

Concretion

You can actually do it by just using the parameters of minLength and focus in autocomplete, without any further coding. See the solution by androidmj. – Amazed

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

Relish

Answer 3

Try binding the focus with autocomplete.

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

Check out my sample JSFiddle.

Nonessential

Answer 4

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

Make sure your autocomplete's minLength is 0.

Tavie

it works a bit odd now. The dropdown now requires the selection to be selected with either the down arrow or with double click. A single click put the choice in the box but it doesn't stay when you move the mouse. Firefox or IE – Joo

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

Gymnasium

Answer 6

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)

Judas

Answer 7

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

Megrim

A solution that uses only JQuery autocomplete's parameters. The exact solution everyone should be looking for. – Amazed