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

Question

是否有可能禁用自动完成中的列表元素，所以它不可选（灰色）？

我有这样的代码，从jQuery UI示例页面采取：

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/

Answer 1

如果我理解正确的话，你要添加禁用选项与信息说来缩小搜索时结果大于X，对于你需要一个定制response和渲染方法：

Working fiddle

$(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更多的信息在respo nse的方法，_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 $("<li>") 
       //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("<a>" + item.label + "</a>").appendTo(ul); 
    }; 

EDIT 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 $("<li>").append("<a>" + item.label + "</a>").appendTo(ul); 
    }; 

不再需要CSS。

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