Comment mettre en évidence les termes de recherche dans les listes déroulantes de saisie semi-automatique de jQuery UI ?

Personnalisation des résultats du plug-in de saisie semi-automatique

Le plug-in de saisie semi-automatique jQuery UI offre un large éventail de fonctionnalités, mais il ne répond pas toujours vos exigences de formatage précises. Si vous devez mettre en évidence des séquences de caractères de recherche dans les résultats de la liste déroulante, voici comment tirer parti de la flexibilité du plug-in :

Monkey-Patching du plug-in de saisie semi-automatique

Le La clé pour personnaliser les résultats est de remplacer la fonction _renderItem par défaut qui génère les éléments de la liste déroulante. Vous pouvez le faire grâce à une technique appelée « patching de singe ». En définissant une nouvelle fonction _renderItem, vous pouvez restituer les résultats dans le format souhaité.

Implémentation

L'exemple de code suivant fournit une version améliorée de la fonction _renderItem qui formate faire correspondre des séquences de caractères avec du texte en gras :

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

Intégration dans votre code

Appelez la fonction MonkeyPatchAutocomplete dans le bloc $(document).ready(...) une fois pour activer le formatage personnalisé :

monkeyPatchAutocomplete();

Limitations

Bien que cette technique fournisse des fonctionnalités de base, elle présente quelques limitations :

• Il crée un objet d'expression rationnelle distinct pour chaque élément, qui pourrait être optimisé pour plus d'efficacité.
• Le formatage utilise des styles en ligne, ce qui peut affecter la cohérence entre plusieurs widgets de saisie semi-automatique sur la même page.

Préservation de la casse

Pour conserver la casse d'origine des caractères recherchés au lieu de faire correspondre les caractères saisis, utilisez "$&" au lieu de "this.term" dans le code :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!