如何在jQuery自动完成列表中禁用元素

是否可以在自动完成中禁用列表元素，因此它不可选择（并且显示为灰色）？

我有这个代码，取自jQuery UI示例页面：

HTML：

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/

Answer 1

如果我理解正确，你想添加一个禁用选项，并在结果超过X时说明要缩小搜索范围，那么你需要一个自定义response和渲染方法：

工作小提琴

 $(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  if value is empty if(item.value ==''){ return $('
'+item.label+'
').appendTo(ul); }else{ return $("
") .append("" + item.label + "") .appendTo(ul); } }; }); 

您可以参考文档以获取有关响应方法的更多信息， _renderItem函数未记录，但我在其中一个示例的源代码中找到了它

Answer 2

通过一些技巧工作，你可以做一些事情：

JS

 $( "#tags" ).autocomplete({ source: availableTags, focus:function(e){e.stopPropagation();return false;}, select:function(e){e.stopPropagation();return false;} }); 

CSS

 .ui-autocomplete .ui-state-focus{ border:0 !important; background:0 !important; } 

http://jsfiddle.net/techunter/zyGNQ/

编辑：

您需要修改渲染器然后：

 $( "#tags" ).autocomplete({ source: availableTags, focus:function(e, ui){ //if focusing on the extra elements return false thus doing nothing return ui.item.idx<=2; }, select:function(e, ui){ //if selecting on the extra elements return false thus doing nothing return ui.item.idx<=2;} }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { //small trick to get the current element index while the list is constructing, we set this as a helper for later usage inside the item. item.idx=ul[0].childElementCount; return $( "
" ) //if index is greater than 2 then we add a custom 'disable' class. this will help formating the disabled elements .toggleClass('disable',ul[0].childElementCount>2) //appending the element .append( "" + item.label + "" ).appendTo( ul ); }; 

编辑2，e.toElement技巧

在调查此事件时发现了这一点：

 $("#tags").autocomplete({ source: availableTags, focus: function (e, ui) { $(e.toElement).toggleClass('ui-state-focus', ui.item.idx <= 2); return ui.item.idx <= 2; }, select: function (e, ui) { return ui.item.idx <= 2; } }).data("ui-autocomplete")._renderItem = function (ul, item) { item.idx = ul[0].childElementCount; return $("
").append("" + item.label + "").appendTo(ul); }; 

不再需要CSS。

http://jsfiddle.net/techunter/zyGNQ/