jquery autocomplete trigger dropdown on input:focus

Question

I'm using the popular JQuery Autocomplete plugin below.

http://jqueryui.com/demos/autocomplete/

Currently if you type a phrase the drop down appears but when you click away it hides. This is fine. However the only way to bring the dropdown back is to either click in the input field and type further characters or press keydown.

Any ideas on how to trigger the dropdown of results when the user clicks in the input field? I've tried to trigger the focus event for the input field but that doesn't work. I somehow need to manually call the autocomplete dropdown event when the input field is focused. Thanks.

Answer 1

Working demo http://jsfiddle.net/CNYCS/

Cool; so all you need to do is bind focus event with the autocomplete, rest `autocomplete will take over from there as you can see in the demo.

Helpful Link: http://forum.jquery.com/topic/how-to-bind-focus-input-to-trigger-autocomplete & http://docs.jquery.com/UI/Autocomplete#method-search

Hope this helps,

Rest code is in jsfiddle.

code

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

Answer 2

There is no obvious way to do so according to doc. But you can try with focus (or click or keyup) event on the autocomplete enabled textbox:

$('#autocomplete').trigger("keyup"); 

or

$('#autocomplete').trigger("focus"); 

or

$('#autocomplete').trigger("click"); 

As @Tats_innit mentioned the code, after that you need to just add the line

$('#tags').trigger("focus"); // as @Tats_innit's solution bind focus
                             // so you need to trigger focus

DEMO

Answer 3

Adding to the code given above. In my case availableTags were loading from server values. Hence I wanted to open popup only if the value was blank - this saves an unnecessary trigger for server to load tags again on focus.

$( "#tags" ).autocomplete({
        source: availableTags,
        minLength:0
    }).bind('focus', function () {
            if ($(this).val().length == 0) {
                $(this).autocomplete("search", "");
            }
        });