JQuery UI Autocomplete - Have the menu open when user clicks in the text box

Question

I'm using this JQuery autocomplete widget.

How can I make it automatically open the menu when the user clicks in the text box? I want the user to see all the options.

Answer 1

You need to trigger the search event manually and set the minLength option on the widget to zero:

$("input").autocomplete({
    minLength: 0,
    /* other options */
}).on("focus", function () {
    $(this).autocomplete("search", "");
});

Working example: http://jsfiddle.net/9JmVu/

Answer 2

I think I got it actually. If you set minLength to 0, and then trigger a search for "", it opens the menu.

      $(inputSelector).autocomplete(
              {
                  source: this.validConstructCodes,
                  minLength: 0,
                  autoFocus: true,
                  autoSelect: true
              });
      $(inputSelector).focus(function(event) {
        $(this).autocomplete( "search" , "" );
      });

Answer 3

As explained from Andrew you need to trigger the event.

But once you got the result from an ajax request, it's better to show the results again instead of asking the server again. The minLength value is independent, could be 2 as recommended on server requests.

$("input").autocomplete({
    minLength: 2,
    /* your options */
}).on("focus", function () {
    /* the element with the search results */
    var uid = $("#ui-id-"+$(this).autocomplete("instance").uuid);

    if(uid.html().length == 0) {
        /* same as $(this).autocomplete("search", this.value); */
        $(this).keydown();
    }
    else {
        uid.show();
    }
});