jQuery otomatik tamamlama listesinde öğe nasıl devre dışı bırakılır

Question

Otomatik tamamlamada bir liste öğesini devre dışı bırakmak mümkün mü, bu nedenle seçilemez (ve grileştirilmiş) değil?

jQuery UI örnek sayfadaki alınan bu kodu vardır:

HTML:

<input id="tags" /> 

jQuery:

Örnek olarak

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

- Mümkünse son devre dışı bırakmak için öğe listesinde 3'ten fazla öğe varsa?

Gerçek kodumda, bir AJAX isteğim var, ancak otomatik tamamlama kutusunda 20'den fazla sonuç göstermek istemiyorum, bu yüzden bundan daha fazlası varsa, "aramanızı daraltma" gibi bir şey göstermelidir ve son elemanı devre dışı bırakın, bu yüzden seçilemez (ancak sadece son eleman devre dışı bırakılmalıdır).

Yukarıdaki kod bir keman demo ile burada, etrafında bir şeyler yapabileceğini bazı hile işler ile http://jsfiddle.net/m6zvf/

Answer 1

Sana sonuçları X daha olduğunda bunun için özel bir response ihtiyaç ve yöntemleri hale ediyorum, mesaj aramayı daraltmak için diyerek bir engelli seçeneği eklemek istediğiniz doğru anlamak:

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

Sen RESPO ilgili daha fazla bilgi için documentation başvurabilirsiniz nse yöntemi, _renderItem işlevi belgelenmemiş, ancak bu örneklerden birinin kaynak kodunda buldum.

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/

DÜZENLEME: Daha sonra oluşturucusunu değiştirmeniz gerekir

:

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

olay bakarak bu süre bulundu :

$("#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); 
    }; 

Artık CSS'ye gerek yok.

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