Comment personnaliser l’affichage du plugin de saisie semi-automatique avec la mise en évidence des correspondances en gras ?

Personnalisation de l'affichage des résultats du plugin de saisie semi-automatique avec mise en évidence des correspondances en gras

Dans le plugin de saisie semi-automatique de jQuery UI, la mise en évidence des termes de recherche dans les résultats déroulants améliore l'utilisateur expérience. Cet article explique comment personnaliser cet affichage en fonction de besoins spécifiques.

Solution : Monkey-Patching

Monkey-patching, une technique permettant de redéfinir les fonctions internes de la bibliothèque, fournit un solution. Le remplacement de la fonction _renderItem, qui génère des éléments de liste pour les suggestions, permet un rendu personnalisé.

Voici le code de patch singe qui ajoute une surbrillance en gras à la partie correspondante des résultats :

<code class="javascript">function monkeyPatchAutocomplete() {
  $.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);
  };
}</code>

Appelez cette fonction dans $(document).ready(..):

<code class="javascript">$(document).ready(function() {
  monkeyPatchAutocomplete();
});</code>

Considérations :

Cette approche de hack présente certaines limites :

• Un modèle Regex est créé pour chaque élément rendu, alors qu'il peut être réutilisé.
• Le style en ligne est utilisé à la place de la classe CSS pour le formatage.

Malgré ces limitations, le La technique met efficacement en évidence les termes correspondants dans les résultats déroulants, répondant ainsi à l'exigence souhaitée.

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!