Comment personnaliser le format d'affichage des résultats dans le plugin de saisie semi-automatique ?

Personnalisation du format d'affichage des résultats dans le plug-in de saisie semi-automatique

Le plug-in de saisie semi-automatique jQuery UI fournit un moyen puissant de gérer les entrées de l'utilisateur et de suggérer des options pertinentes . Par défaut, les résultats déroulants affichent les correspondances des entrées de l'utilisateur dans les éléments suggérés. Cependant, vous souhaiterez peut-être un format plus personnalisé, comme la mise en évidence des caractères de recherche dans les résultats affichés.

Monkey-Patching the Plugin

Pour y parvenir, vous pouvez utilisez la technique connue sous le nom de « patch singe », dans laquelle vous redéfinissez une fonction interne au sein de la bibliothèque. Dans ce cas, vous devez remplacer la fonction _renderItem responsable de la création de chaque élément dans la liste déroulante.

Création de la fonction _renderItem personnalisée

Voici un exemple de une fonction _renderItem personnalisée :

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

Cette fonction utilise une expression régulière pour isoler les caractères correspondants et les enveloppe dans un élément span HTML avec un style spécifique. L'élément span utilise une police en gras et une couleur bleue pour mettre en évidence les correspondances.

Application du patch

Une fois que vous avez créé la fonction personnalisée, vous pouvez l'appliquer à le widget Autocomplete en appelant la fonction suivante dans l'événement document ready :

monkeyPatchAutocomplete();

Cette fonction remplacera la fonction _renderItem par défaut par votre version personnalisée.

Préservation de la casse des caractères

Notez que le code ci-dessus met en évidence les correspondances mais ne préserve pas la casse de l'entrée d'origine. Pour préserver la casse, modifiez la ligne de remplacement dans la fonction _renderItem comme suit :

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

Correction ciblée

Les modifications ci-dessus affectent tous les widgets de saisie semi-automatique de la page. Si vous souhaitez personnaliser uniquement une instance spécifique, référez-vous à la question "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!