Copy of https://perso.isima.fr/loic/html/exo_js_search.php
tete du loic

 Loïc YON [KIUX]

  • Enseignant-chercheur
  • Référent Formation Continue
  • Responsable des contrats pros ingénieur
  • Référent entrepreneuriat
  • Responsable de la filière F2 ingénieur
  • Secouriste Sauveteur du Travail
mail
loic.yon@isima.fr
phone
(+33 / 0) 4 73 40 50 42
location_on
Institut d'informatique ISIMA
  • twitter
  • linkedin
  • viadeo

[JS] Recherche

 Cette page commence à dater. Son contenu n'est peut-être plus à jour. Contactez-moi si c'est le cas!

Présentation de l'exercice

Nous voulons implémenter la recherche et la mise en valeur d'une chaîne de caractères dans une page web.

Voici le morceau de code donné dans le support de cours jQuery et son adaptation Vanilla :


var reg = new RegExp(s, "g");
var doc = document.getElementsByTagName("p"), e, c;
for (var i = 0; i < doc.length; ++i) {
  e = doc[i]; 
  c = e.innerHTML.replace(reg ,
          "<span class='hilite'>"+s+"</span>"
          );
  if (c != e.innerHTML )
      e.innerHTML = c;
}
  

$('p:contains('+s+')')
  .each(function(){
     var reg = new RegExp(s, "g");
     $(this).html( 
       $(this).html()
          .replace(reg , "<span class='hilite'>"+s+"</span>")
     ); 
  });

La version jQuery utilise un sélecteur spécifique contains qui n'est pas dans les spécifications CSS (la proposition est tombée à l'eau). On regarde donc "tous" les éléments à la main (on s'est contenté des éléments p.

Mise en œuvre

Notes

Le formulaire

En ajoutant un formulaire, il est tout à fait possible que l'affichage de la chaîne recherchée soit TRÈS temporaire...

Si vous n'avez pas idée de ce qui ce passe :

Le comportement par défaut après un "submit" de formulaire est de charger la page action, la page elle-même si cela n'est pas précisé ... Qui dit page nouvelle, dit ...

Avec du code, cela peut se faire de deux manières :


onEvent="f1();return false;"
// OU
function callback(event) {
  event.preventDefault();
}

Recherches successives

La dernière question est moins simple qu'il n'y parait ! Voici quelques pistes pour la dernière question :