Comment personnaliser le formatage des résultats du plugin de saisie semi-automatique dans l'interface utilisateur jQuery ?

Personnalisation du formatage des résultats du plugin de saisie semi-automatique

Lorsque vous utilisez le populaire plugin jQuery UI Autocomplete, vous pouvez rencontrer le besoin de mettre en évidence des séquences de caractères spécifiques dans le résultats déroulants pour améliorer l’expérience utilisateur. Cet article explique comment obtenir cet effet.

Monkey-Patching du widget de saisie semi-automatique

Pour personnaliser le formatage du résultat, vous devrez remplacer la fonction _renderItem par défaut de le widget de saisie semi-automatique. Cette fonction est responsable de la création de chaque élément de la liste déroulante. En le remplaçant, vous pouvez modifier l'apparence de l'élément pour inclure un formatage personnalisé.

Voici un exemple d'un tel patch de singe :

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

Appelez cette fonction une fois dans le $(document). gestionnaire d'événements ready(...) pour activer la personnalisation.

Gestion de la sensibilité à la casse

Si vous souhaitez conserver la casse des chaînes de correspondance plutôt que d'utiliser la casse des caractères saisis, utilisez cette ligne :

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

Limitations

Bien que cette méthode vous permette de mettre en évidence le terme de recherche dans les résultats déroulants, elle a des limites :

• Chaque widget de saisie semi-automatique sur la page sera affecté.
• Le terme est mis en évidence avec un style en ligne au lieu d'une classe CSS.

Notes supplémentaires

Si vous devez personnaliser une seule instance spécifique du widget de saisie semi-automatique sur une page, vous pouvez utiliser une approche plus ciblée. Reportez-vous à la documentation pour plus de détails.

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!