jQuery UI自动完成search（）不显示DropDownList

Question

Given the documentation for the search method for the Autocomplete Widget, I would expect a button that calls this method would display a box containing a list of available selections. Nothing happens.

I have the following code that creates the autocomplete widget on a text box:

$("#StateListCoolBox").autocomplete({
    source: StateListCoolBoxTags,
    focus: function( event, ui ) {
        $("#StateListCoolBox").val(ui.item.label);
        return false;
    },

    select: function( event, ui ) {
        $("#StateListCoolBox").val(ui.item.label);
        $("#StateListCoolBox-id").val(ui.item.value);
        return false;
    }
});

It works fine.

I have the following code attached to the button I want to display the list. It gets called but nothing happens:

function StateListCoolBox_dropDownClick() {
    $("#StateListCoolBox").autocomplete("search", "" );
};

I have tested this with text in the corresponding textbox and with the textbox blank.

How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?

Answer 1

If you look at the "View Source" for this: http://jqueryui.com/autocomplete/#combobox

You will see:

  _createShowAllButton: function() {
    var input = this.input,
      wasOpen = false;

    $( "<a>" )
      .attr( "tabIndex", -1 )
      .attr( "title", "Show All Items" )
      .tooltip()
      .appendTo( this.wrapper )
      .button({
        icons: {
          primary: "ui-icon-triangle-1-s"
        },
        text: false
      })
      .removeClass( "ui-corner-all" )
      .addClass( "custom-combobox-toggle ui-corner-right" )
      .on( "mousedown", function() {
        wasOpen = input.autocomplete( "widget" ).is( ":visible" );
      })
      .on( "click", function() {
        input.trigger( "focus" );

        // Close if already visible
        if ( wasOpen ) {
          return;
        }

        // Pass empty string as value to search for, displaying all results
        input.autocomplete( "search", "" );
      });
  }

So this shows all the results by triggering focus event on the text field.

How do I get a button to behave like the button on a DropDown Combo, so that when clicked, the list of available selections is displayed?

I think this fits what you wanted to accomplish. So Try the following with minLength: 0 :

function StateListCoolBox_dropDownClick() {
    $("#StateListCoolBox").trigger("focus").autocomplete( "search", "" );
};

That said, there should be nothing wrong with your method:

Triggers a search event and invokes the data source if the event is not canceled. Can be used by a selectbox-like button to open the suggestions when clicked. When invoked with no parameters, the current input's value is used. Can be called with an empty string and minLength: 0 to display all items.

Your current code is simply missing: minLength: 0 . Try both if you like.