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

私が正しく理解していれば、あなたはカスタムresponseを必要とする方法をレンダリングしたい、そのために結果は、X以上あるときに、検索を絞り込むためにというメッセージで無効にオプションを追加したいです：

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); 
     } 
    }; 
}); 

あなたはRESPO詳細はdocumentationを参照することができます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/

EDIT：

あなたはその後、レンダラを変更する必要があります

$("#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/