Question

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

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

{{1}}

工作正常。

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

{{1}}

我在相应的文本框中使用文本对其进行了测试，文本框为空白。

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

Answer 1

如果你看一下＆＃34;查看来源＆＃34;为此：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。如果你愿意，试试两个。

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

1 个答案: