13

オートコンプリートでリスト要素を無効にして、選択できないようにする (グレー表示する) ことはできますか?

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 件を超える結果を表示したくないので、これより多い場合は、「検索を絞り込んでください」などのように表示し、最後の検索を無効にする必要があります。要素であるため、選択できません (ただし、最後の要素のみを無効にする必要があります)。

上記のコードは、Fiddle デモと共にここにあります。http://jsfiddle.net/m6zvf/

4

3 に答える 3

3

いくつかのトリックワークで、あなたは何かをすることができます:

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/

于 2013-08-27T06:47:10.167 に答える