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.

Swordfish

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

Recusant

Sweet! Exactly what I need! Works like a charm! – Mathis

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

Molli

++1 again man :) glad these days I am not jinx-ing solution with yours :P diff demo below for OP anyhow +! – Recusant

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

Savell

I know it kinda defeats the purpose, but is it possible to open the dropdown with all options even if there is content in the text field? Or does anyone have a suggestion for a different plugin that would do this? I basically want a free text input with a pre-defined list showing up on focus, not filtered. – Redundancy

If you remove the following condition, this code will get your job done. if ($(this).val().length == 0) { – Savell