Comment désactiver l'élément dans la liste de complétion automatique jQuery

Est-il possible de désactiver un élément de la liste dans une saisie semi-automatique, de sorte qu'il n'est pas chooseable (et en grisé)?

J'ai ce code, prises à partir de l'INTERFACE utilisateur de jQuery page d'exemple:

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

Comme un exemple - est-il possible de désactiver le dernier élément si il y a plus de 3 éléments dans la liste?

Dans mon code, j'ai une requête AJAX mais je ne veux pas montrer plus de 20 résultats dans la zone de saisie semi-automatique, donc si il y a plus que cela, il devrait afficher quelque chose comme "s'il vous plaît préciser votre recherche" et de désactiver le dernier élément, de sorte qu'il n'est pas chooseable (mais seul le dernier élément doit être désactivé).

Le code ci-dessus est ici avec un Violon démo, http://jsfiddle.net/m6zvf/

source d'informationauteur DHS

  1. 21

    Si je comprends bien, vous voulez ajouter une option désactivée avec le message disant pour affiner la recherche, lorsque les résultats sont plus que X, pour que vous avais besoin d'un custom response et de rendre méthodes:

    Travail de violon

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

    Vous pouvez vous référer à la la documentation pour plus d'informations sur la méthode d'intervention, la _renderItem fonction n'est pas documentée, mais je l'ai trouvé dans le code source de l'un des exemples

  2. 3

    Avec une astuce de travail que vous pourriez faire quelque chose autour de :

    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 :

    Vous avez besoin de modifier le moteur de rendu alors :

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

    trouvé cela tout en regardant vers l'événement :

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

    Plus besoin de la CSS.

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