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

问题

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.

回答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/

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

回答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();
    }
});

来源：https://stackoverflow.com/questions/8401734/jquery-ui-autocomplete-have-the-menu-open-when-user-clicks-in-the-text-box