Comment puis-je personnaliser le formatage des résultats du plug-in de saisie semi-automatique?

J'utilise le plug-in jQuery UI Autocomplete . Existe-t-il un moyen de mettre en évidence la séquence de caractères de recherche dans les résultats déroulants?

Par exemple, si j'ai "foo bar" comme données et que je tape "foo", j'obtiendrai " foo bar" dans la liste déroulante, comme ceci:

Oui, vous pouvez si vous effectuez une saisie semi-automatique de monkey-patch.

Dans le widget de saisie semi-automatique inclus dans la v1.8rc3 de jQuery UI, la fenêtre contextuelle de suggestions est créée dans la fonction _renderMenu du widget de saisie semi-automatique. Cette fonction est définie comme ceci:

_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

La fonction _renderItem est définie comme ceci:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

Donc, ce que vous devez faire est de remplacer ce _renderItem fn par votre propre création qui produit l'effet souhaité. Cette technique, redéfinissant une fonction interne dans une bibliothèque, que j'apprends, s'appelle le monkey-patching . Voici comment je l'ai fait:

  function monkeyPatchAutocomplete() {

      // don't really need this, but in case I did, I could store it and chain
      var oldFn = $.ui.autocomplete.prototype._renderItem;

      $.ui.autocomplete.prototype._renderItem = function( ul, item) {
          var re = new RegExp("^" + this.term) ;
          var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
                  this.term + 
                  "</span>");
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + t + "</a>" )
              .appendTo( ul );
      };
  }

Appelez cette fonction une fois $(document).ready(...).

Maintenant, c'est un hack, car:

• il y a un obj regexp créé pour chaque élément rendu dans la liste. Cet obj d'expression régulière doit être réutilisé pour tous les éléments.

• il n'y a pas de classe css utilisée pour le formatage de la pièce terminée. C'est un style en ligne.
  Cela signifie que si vous aviez plusieurs saisie semi-automatique sur la même page, ils recevraient tous le même traitement. Un style css résoudrait cela.

... mais cela illustre la technique principale, et cela fonctionne pour vos besoins de base.

exemple de travail mis à jour: http://output.jsbin.com/qixaxinuhe

Pour conserver la casse des chaînes de correspondance, par opposition à l'utilisation de la casse des caractères tapés, utilisez cette ligne:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
          "$&" + 
          "</span>");

En d'autres termes, à partir du code d'origine ci-dessus, il vous suffit de remplacer this.termpar "$&".

MODIFIER
Ce qui précède modifie chaque widget de saisie semi-automatique de la page. Si vous ne souhaitez en modifier qu'une seule, consultez cette question:
Comment corriger * une seule * instance de saisie semi-automatique sur une page?

cela fonctionne également:

       $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };

une combinaison des réponses de @ Jörn Zaefferer et @ Cheeso.

Super utile. Je vous remercie. +1.

Voici une version allégée qui trie sur "La chaîne doit commencer par le terme":

function hackAutocomplete(){

    $.extend($.ui.autocomplete, {
        filter: function(array, term){
            var matcher = new RegExp("^" + term, "i");

            return $.grep(array, function(value){
                return matcher.test(value.label || value.value || value);
            });
        }
    });
}

hackAutocomplete();

Voilà, un exemple complet fonctionnel:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Autocomplete - jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label for="search"></label>
  <input type="text" name="search" id="search" />
</form>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};


var availableTags = [
    "JavaScript",
    "ActionScript",
    "C++",
    "Delphi",
    "Cobol",
    "Java",
    "Ruby",
    "Python",
    "Perl",
    "Groove",
    "Lisp",
    "Pascal",
    "Assembly",
    "Cliper",
];

$('#search').autocomplete({
    source: availableTags,
    minLength: 3
});


});
</script>
</body>
</html>

J'espère que cela t'aides

jQueryUI 1.9.0 modifie le fonctionnement de _renderItem.

Le code ci-dessous prend en compte ce changement et montre également comment je faisais la mise en correspondance des tons clairs en utilisant le plugin jQuery Autocomplete de Jörn Zaefferer. Il mettra en évidence tous les termes individuels dans le terme de recherche global.

Depuis que je suis passé à l'utilisation de Knockout et de jqAuto, j'ai trouvé que c'était un moyen beaucoup plus simple de styliser les résultats.

function monkeyPatchAutocomplete() {
   $.ui.autocomplete.prototype._renderItem = function (ul, item) {

      // Escape any regex syntax inside this.term
      var cleanTerm = this.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

      // Build pipe separated string of terms to highlight
      var keywords = $.trim(cleanTerm).replace('  ', ' ').split(' ').join('|');

      // Get the new label text to use with matched terms wrapped
      // in a span tag with a class to do the highlighting
      var re = new RegExp("(" + keywords + ")", "gi");
      var output = item.label.replace(re,  
         '<span class="ui-menu-item-highlight">$1</span>');

      return $("<li>")
         .append($("<a>").html(output))
         .appendTo(ul);
   };
};

$(function () {
   monkeyPatchAutocomplete();
});

pour un moyen encore plus simple, essayez ceci:

$('ul: li: a[class=ui-corner-all]').each (function (){      
 //grab each text value 
 var text1 = $(this).text();     
 //grab user input from the search box
 var val = $('#s').val()
     //convert 
 re = new RegExp(val, "ig") 
 //match with the converted value
 matchNew = text1.match(re);
 //Find the reg expression, replace it with blue coloring/
 text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>")  + matchNew +    ("</span>"));

    $(this).html(text)
});
  }

Voici une répétition de la solution de Ted de Koning. Il comprend :

• Recherche insensible à la casse
• Recherche de nombreuses occurrences de la chaîne recherchée

$.ui.autocomplete.prototype._renderItem = function (ul, item) {

    var sNeedle     = item.label;
    var iTermLength = this.term.length; 
    var tStrPos     = new Array();      //Positions of this.term in string
    var iPointer    = 0;
    var sOutput     = '';

    //Change style here
    var sPrefix     = '<strong style="color:#3399FF">';
    var sSuffix     = '</strong>';

    //Find all occurences positions
    tTemp = item.label.toLowerCase().split(this.term.toLowerCase());
    var CharCount = 0;
    tTemp[-1] = '';
    for(i=0;i<tTemp.length;i++){
        CharCount += tTemp[i-1].length;
        tStrPos[i] = CharCount + (i * iTermLength) + tTemp[i].length
    }

    //Apply style
    i=0;
    if(tStrPos.length > 0){
        while(iPointer < sNeedle.length){
            if(i<=tStrPos.length){
                //Needle
                if(iPointer == tStrPos[i]){
                    sOutput += sPrefix + sNeedle.substring(iPointer, iPointer + iTermLength) + sSuffix;
                    iPointer += iTermLength;
                    i++;
                }
                else{
                    sOutput += sNeedle.substring(iPointer, tStrPos[i]);
                    iPointer = tStrPos[i];
                }
            }
        }
    }


    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + sOutput + "</a>")
        .appendTo(ul);
};

Voici une version qui ne nécessite aucune expression régulière et qui correspond à plusieurs résultats dans l'étiquette.

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
            var highlighted = item.label.split(this.term).join('<strong>' + this.term +  '</strong>');
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + highlighted + "</a>")
                .appendTo(ul);
};

Jetez un œil à la démo combobox, elle inclut la mise en évidence des résultats: http://jqueryui.com/demos/autocomplete/#combobox

Le regex utilisé ici traite également des résultats html.

Voici ma version:

• Utilise les fonctions DOM au lieu de RegEx pour casser des chaînes / injecter des balises span
• Seule la saisie semi-automatique spécifiée est affectée, pas tous
• Fonctionne avec la version 1.9.x de l'interface utilisateur

function highlightText(text, $node) {
    var searchText = $.trim(text).toLowerCase(),
        currentNode = $node.get(0).firstChild,
        matchIndex,
        newTextNode,
        newSpanNode;
    while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
        newTextNode = currentNode.splitText(matchIndex);
        currentNode = newTextNode.splitText(searchText.length);
        newSpanNode = document.createElement("span");
        newSpanNode.className = "highlight";
        currentNode.parentNode.insertBefore(newSpanNode, currentNode);
        newSpanNode.appendChild(newTextNode);
    }
}
$("#autocomplete").autocomplete({
    source: data
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var $a = $("<a></a>").text(item.label);
    highlightText(this.term, $a);
    return $("<li></li>").append($a).appendTo(ul);
};

Mettre en évidence un exemple de texte correspondant

vous pouvez utiliser le code suivant:

lib:

$.widget("custom.highlightedautocomplete", $.ui.autocomplete, {
    _renderItem: function (ul, item) {
        var $li = $.ui.autocomplete.prototype._renderItem.call(this,ul,item);
        //any manipulation with li
        return $li;
    }
});

et logique:

$('selector').highlightedautocomplete({...});

il crée un widget personnalisé qui peut remplacer _renderItemsans écraser le _renderItemprototype de plugin original.

dans mon exemple, j'ai également utilisé la fonction de rendu d'origine pour simplifier le code

c'est une chose importante si vous souhaitez utiliser le plugin à différents endroits avec une vue différente de la saisie semi-automatique et que vous ne voulez pas casser votre code.

Si vous utilisez à la place le plugin tiers, il a une option de surbrillance: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

(voir l'onglet Options)

Pour prendre en charge plusieurs valeurs, ajoutez simplement la fonction suivante:

function getLastTerm( term ) {
  return split( term ).pop();
}

var t = String(item.value).replace(new RegExp(getLastTerm(this.term), "gi"), "<span class='ui-state-highlight'>$&</span>");