How to make jQuery autocomplete list display all options onfocus and hide after option is selected?

Question

I have a form with an autocomplete that starts the search "onfocus" and shows the option list when the user clicks into the search field, even when they do not enter anything.

The problem is the autocomplete requires the option to be selected with either the keyboard (down arrow followed by tab/return or with a double click). My first thought was that a single click causes the focus to remain in the search field, and thus the autocomplete to stay visible. However, the search field remains focused after the second click, but the autocomplete disappears after the second click.

Any ideas?

<script>
$(document).ready(function() {

    var autocomplete_focus = function(){           
        if ($(this).val().length == 0) {
            $(this).autocomplete("search", "%");
        }
    }   

    $( ".autocomplete" ).autocomplete({
            source: "../../db/autocomplete_list.php",
            minLength: 0
    });

    $( ".autocomplete" ).focus(autocomplete_focus);

});
</script>

I realize a similar question has been posted on here before; however, the proposed solutions are not working for me.

Yes, that seems to work; however, the problem seems to occur only with a remote source for some reason. — Michael, Nov 21 '11 at 02:36
Thanks! See Alex's answer below. That is the closest I've gotten too; however, not perfect! — Michael, Nov 21 '11 at 02:38

score 5 · Accepted Answer · answered Nov 21 '11 at 03:07

5

Not sure if this is an acceptable solution, but one way to do this is to populate the input with the focused value. This prevents the menu from showing twice:

/* snip: */
focus: function (event, ui) {
    this.value = ui.item.value;
},

Here's an example: http://jsfiddle.net/wxQf7/

Try removing the focus event handler to see the symptom in the question.

answered Nov 21 '11 at 03:07

Andrew Whitaker

124,656
32
289
307

@Michael: No problem! Glad to help. This really should be fixed in the widget itself actually. – Andrew Whitaker Nov 21 '11 at 03:25

score 2 · Answer 2 · edited May 23 '17 at 12:01

2

This method:

$( ".autocomplete" ).autocomplete({
        source: "../../db/autocomplete_list.php",
        minLength: 0
}).focus(function(){            
        $(this).trigger('keydown.autocomplete');
});

works for me.

Source:

Display jquery ui auto-complete list on focus event

edited May 23 '17 at 12:01

Community

1
1

answered Nov 21 '11 at 02:27

Alex Peattie

26,633
5
50
52

1

This is the best solution I've found; however, this only displays all values on the "first" focus. When I focus on the search field after the page loads, it displays all of the values. However, if I then click off the search field (remove focus), and then click back on it a second time, it does not pull up the full list again. – Michael Nov 21 '11 at 02:35

score 0 · Answer 3 · edited May 31 '13 at 19:57

Try this. This piece of code actually removes the keydown.autocomplete which has issues. Instead, it searches everytime you focus on the text field.

$( ".autocomplete" ).autocomplete({
    source: "../../db/autocomplete_list.php",
    minLength: 0
}).focus(function(){ 
    $(this).data("autocomplete").search($(this).val());
}

However, if you want the drop down to go away as soon as you select an entry, add this line

$( ".autocomplete" ).autocomplete({
    source: "../../db/autocomplete_list.php",
    minLength: 0
}).focus(function(){

    **if ($(this).autocomplete("widget").is(":visible"))
       return;**
    $(this).data("autocomplete").search($(this).val());
}

When the control receives back the focus in case of a mouse click, it doesn't do the display-all-on-focus if the drop-list is already shown. That's what this code does

How to make jQuery autocomplete list display all options onfocus and hide after option is selected?

3 Answers3

Linked