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

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

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

回答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.

回答4:

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

回答5:

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

Make sure your autocomplete's minLength is 0.

回答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)

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

来源：https://stackoverflow.com/questions/4479598/jquery-autocomplete-ui-id-like-it-to-start-the-search-onfocus-without-the-user

标签

jquery

jquery-ui-autocomplete