Jquery autocomplete dropdown trigger: focus

Question

I use the popular jQuery Autocomplete plugin below.

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

Currently, if you type a phrase, a drop-down list appears, but when you click on it, it is hidden. It is perfectly. However, the only way to return the pop-up window is to either click in the input field, or enter additional characters or press the down key.

Any ideas on how to cause the disclosure of results when the user clicks in the input field? I tried to trigger a focal event for the input field, but this does not work. I need to somehow manually trigger an autocomplete dropdown event when the input field is focused. Thanks.

Answer 1

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

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

Useful 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,

The break code is in jsfiddle.

the code

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

Answer 2

There is no obvious way to do this according to the document. But you can try with the focus event (either click or keyup ) in the autocomplete enabled textbox :

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

or

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

or

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

The code is specified as @Tats_innit , after which you just need to add the line

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

Demo

Answer 3

Adding to the code above. In my case, the available tags were loaded from the server value. Therefore, I wanted to open the popup only if the value was empty - this saves an unnecessary trigger for the server to load tags in focus again.

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