jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Plugins > Le plugin SearchHighlight

Le plugin SearchHighlight

dimanche 15 juillet 2007, par Renato, sebgaillard

Toutes les versions de cet article : [English] [français] [italiano]

Ce plugin met en évidence les mots recherchés lorsqu’on arrive sur une page à partir d’un moteur de recherche.


Démo

Une page de démonstration pour tester les principales options de configuration du plugin

L’idée

L’idée qui consiste à mettre en évidence les mots recherchés quand on arrive sur une page à partir d’un moteur de recherche n’est pas du tout nouvelle. Il n’est pas toujours évident de savoir où se trouvent les mots recherchés dans la page, surtout lorsque celle-ci est très longue, où si le sujet de la page n’est pas tout à fait celui qu’on cherchait. Réussir à trouver la partie de la page qui contient les mots recherchés permettent à l’utilisateur de comprendre immédiatement si ce qu’il voit correspond complètement à la recherche qu’il a effectuée.

Comment ça fonctionne

Le plugin est très simple d’utilisation et a une unique fonction, SearchHighlight(options), a appliquer au document.

Le CSS

<style type='text/css'>
span.hilite {background:yellow}
</style>

Le code javascript

<script src='SearchHighlight.js'></script>
<script type='text/javascript'>
 var options = {exact:"whole",style_name_suffix:false};
 jQuery(function(){
   jQuery(document).SearchHighlight(options);
 });
</script>

SearchHighlight vérifie le site d’origine et, s’il s’agit d’un moteur de recherche qui reconnait, sélectionne les termes recherchés et les mets en évidence dans la page courante. Il est aussi possible de spécifier explicitement les mots recherchés, dans ce cas, le plugin n’effectuera aucune vérification sur le référent [1].

Les options

Le plugin est complètement configurable grâce à une série d’options :

  • exact (string, valeur prédéfinie :"exact")
    "exact" : recherche et met en évidence les mots identiques à ceux cherchés
    "whole" : recherche les correspondances même partielles avec les mots recherchés mais met en évidence les mots entiers
    "partial" : recherche et met en évidence les correspondances même partielles avec les mots recherchés
  • style_name (string, valeur prédéfinie :"hilite")
    La classe de l’élément span qui contient les mots à mettre en évidence.
  • style_name_suffix (booléen, valeur prédéfinie :true)
    si il est vrai, ajoute un numéro au style défini par style_name pour chaque mot trouvé différent. Il est utile pour assigner une couleur de mise en évidence différente pour chaque mot.
  • debug_referrer (string, valeur prédéfinie :null)
    Définir manuellement un référent afin de pouvoir faire des tests et débugguer.
  • engines (matrice d’expressions régulières, valeur prédéfinie :null)
    ajoute les expressions régulières pour la reconnaissance de moteurs de recherche supplémentaires.
    le premier élément est l’expression régulière qui trouve le domaine.
    le second élément est l’expression régulière qui repère les paramètres dans lesquels se trouvent les mots recherchés (query string)
    Ex : [/^http:\/\/my\.site\.net/i,/search=([^&]+)/i] permet de trouver le domaine http://my.site.net comme un moteur de recherche et d’extraire les mots recherchés du paramètre search.
    http://my.site.net?search=mot_recherche
  • highlight (sélecteur ou objet jQuery, valeur prédéfinie :null)
    Le plugin peut aussi effectuer la recherche des mots sur une partie de la page. Ces parties sont sélectionnées par un sélecteur ou un objet jQuery. Si null ou si aucun élément n’est sélectionné, la recherche porte sur tout le document.
  • nohighlight (sélecteur ou objet jQuery, valeur prédéfinie :null)
    Cette option sélectionne les éléments à exclure de la mise en évidence.
  • keys (string, valeur prédéfinie :null)
    Permet de spécifier explicitement les mots recherchés, désactive dans le même temps la vérification du site de provenance. Utile pour désactiver la mise en évidence des recherches provenant des moteurs de recherche et pour mettre en évidance les mots à extraire de l’url ou de la page en elle même.

Notes

[1] le référent est l’adresse de la page d’où on vient

Répondre à cet article


Derniers commentaires