Recherche JQuery (Ctrl+F)

Aujourd’hui un petit bout de JavaScript pour effectuer une recherche dans un bloc HTML. L’exemple montre comment rechercher une occurrence (sans respect de la casse) dans un bloc, afficher le nombre de résultat, et passer a l’occurrence suivante en appuyant sur ENTREE.

• Recherche (casse)

Extension d’une méthode – contains – :

$.extend($.expr[":"], {    "icontains": …

Recherche via la méthode :

var aHiglight = $('#cadreTree a:icontains("' + valeurTxt + '")');

• Mise en surbrillance des éléments correspondants

On change le background des éléments trouvés :

aHiglight.css("background", "#F3EE33"); 

Affichage du résultat :

$('#nbOccur').html(searchIndice + " sur " + aHiglight.length);

• Passage a l’élément suivant

A chaque ENTREE, on incrémente le compteur interne : searchIndice++;

La démo, sur jsfiddle, avec toutes les informations du source (Html + JS) - http://jsfiddle.net/ueJnt/



Enjoy :)