Comment mettre en évidence les termes de recherche dans les résultats de saisie semi-automatique de jQuery UI ?

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

Q : Puis-je mettre en surbrillance les termes de recherche dans les résultats déroulants de saisie semi-automatique ?

Oui, vous pouvez personnaliser le format des résultats du plug-in de saisie semi-automatique pour mettre en évidence les caractères recherchés.

A : Patcher le widget de saisie semi-automatique

Pour obtenir cet effet, utilisez le patch singe, une technique dans laquelle une fonction interne d'une bibliothèque est redéfinie. Dans le widget Autocomplete (version 1.8rc3 de jQuery UI), la fonction _renderItem est responsable de la création des résultats déroulants. Voici comment le redéfinir :

function monkeyPatchAutocomplete() {
  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 );
}

B : Préserver la casse par "$&

Pour conserver la casse des chaînes correspondantes, remplacez this.term par $ & dans la fonction de remplacement :

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

C : Limitations

Ce hack a les limitations suivantes :

• Un nouvel objet RegExp est créé pour chaque élément affiché dans la liste.
• Aucune classe CSS n'est utilisée pour le formatage, donc plusieurs saisies semi-automatiques sur la même page auraient le même style.

D : Application des modifications à des instances spécifiques

Si vous devez modifier une seule instance de saisie semi-automatique, reportez-vous à la question suivante : Comment patcher une seule instance de saisie semi-automatique sur une page ?

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!