Как отключить элемент в списке автозаполнения 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/

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/