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.

Encircle

Do you see the problem here? – Adrien

Yes, that seems to work; however, the problem seems to occur only with a remote source for some reason. – Encircle

Ah, okay. I'll do some more digging. – Adrien

Thanks! See Alex's answer below. That is the closest I've gotten too; however, not perfect! – Encircle

Answer 1

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.

Adrien

@Michael: No problem! Glad to help. This really should be fixed in the widget itself actually. – Adrien

Answer 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

Isaacisaacs

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. – Encircle

Answer 3

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

Jocosity