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
。如果你喜欢,请尝试两种。