JQuery-UI 自动完成搜索（）不显示 DropDownList

Question

鉴于自动完成小部件的 documentation for the search method，我希望调用此方法的按钮会显示一个包含可用选择列表的框。没有任何反应。

我有以下代码在文本框上创建自动完成小部件：

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

它工作正常。

我在要显示列表的按钮上附加了以下代码。它被调用但没有任何反应：

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

我已经用相应文本框中的文本和空白文本框对此进行了测试。

如何使按钮的行为类似于 DropDown Combo 上的按钮，以便在单击时显示可用选择列表？

Answer 1

如果你查看 "View Source" 是这样的：http://jqueryui.com/autocomplete/#combobox

您将看到：

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

因此，这通过在文本字段上触发焦点事件来显示所有结果。

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?

我认为这符合您想要实现的目标。所以用 minLength: 0 尝试以下操作：

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

也就是说，你的方法应该没有问题：

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.

您的当前代码完全缺失：minLength: 0。如果你喜欢，都可以试试。