JQuery-UI自动完成搜索()不显示DropDownList

问题描述:

鉴于Autocomplete Widget的documentation for the search method,我期望调用此方法的按钮将显示一个包含可用选择列表的框。什么都没发生。JQuery-UI自动完成搜索()不显示DropDownList

我有下面的代码,在文本框中创建自动完成构件:

$("#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上的按钮相似,以便在单击时显示可用选择列表?

如果你看一下“查看源文件”这一: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。如果你喜欢,请尝试两种。