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

【问题标题】：JQuery-UI autocomplete search() not displaying DropDownListJQuery-UI 自动完成搜索（）不显示 DropDownList
【发布时间】：2017-07-18 09:36:59
【问题描述】：

鉴于自动完成小部件的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 上的按钮，以便在单击时显示可用选择的列表？

【问题讨论】：

标签： javascript asp.net jquery-ui jquery-ui-autocomplete

【解决方案1】：

如果您为此查看“查看源代码”：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", "" );
      });
  }

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

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

我认为这符合您想要完成的目标。所以用minLength: 0试试下面的：

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

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

触发search 事件并在事件未取消时调用数据源。可以被类似选择框的按钮用来在单击时打开建议。当不带参数调用时，使用当前输入的值。可以使用空字符串和minLength: 0 调用以显示所有项目。

您当前的代码完全丢失了：minLength: 0。如果您愿意，可以尝试两者。

【讨论】：