是否可以在自动完成中禁用列表元素,因此它不可选择(并且显示为灰色)？
HTML：
<input id="tags" />
jQuery的：
$(function() {
var availableTags = [
"ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
举个例子 – 如果列表中有超过3个项目,是否可以禁用最后一个元素？
在我的真实代码中,我有一个AJAX请求,但我不想在自动完成框中显示超过20个结果,所以如果有更多,它应该显示类似“请缩小搜索范围”并禁用最后一个元素,所以它不可选择(但只应禁用最后一个元素).
上面的代码在这里有一个小提琴演示,http://jsfiddle.net/m6zvf/
解决方法
如果我理解正确,你想添加一个禁用选项,并在结果超过X时说明要缩小搜索范围,那么你需要一个自定义响应和渲染方法：
$(function () {
$("#tags").autocomplete({
source: availableTags,response: function (event,ui) {
//Check if we have more than 3 results
if (ui.content.length > 3) {
//Remove all elements until there are only 3 remaining (the use of slice() was not supported)
while (ui.content.length > 3) {
ui.content.pop();
}
//Add message
ui.content.push({
'label': 'Please narrow down your search','value': ''
});
}
}
}).data("ui-autocomplete")._renderItem = function (ul,item) {
//Add the .ui-state-disabled class and don't wrap in <a> if value is empty
if(item.value ==''){
return $('<li class="ui-state-disabled">'+item.label+'</li>').appendTo(ul);
}else{
return $("<li>")
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
};
});
有关响应方法的更多信息,请参阅documentation,_renderItem函数未记录,但我在其中一个示例的源代码中找到了它
