Filtrer un tableau de recherche en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Filtrer les lignes d'un tableau HTML

Avec cette nouvelle astuce de code Javascript, nous allons apprendre à masquer les lignes d'un tableau pour lesquelles les termes hébergés ne contiennent pas la suite de lettres tapées par l'utilisateur dans la zone de recherche.



Sur l'exemple illustré par la capture, nous travaillons sur un tableau listant des personnes avec les prénoms et noms accompagnés de la civilité. Il est constitué de dix-sept lignes, soit de dix-sept personnes. Lorsque l'utilisateur tape les premiers caractères dans la zone de recherche située au-dessus du tableau, comme la lettre a suivie de la lettre n, seules quatre lignes subsistent. En effet, seuls quatre prénoms et noms proposent cette séquence. Et lorsqu'il ajoute une troisième lettre, par exemple de nouveau la lettre n, le filtre exercé par Javascript restreint les résultats à deux lignes concordantes.

Base de travail
Pour la mise en place de cet étonnant code Javascript, nous proposons d'appuyer l'étude sur une page Web offrant déjà ce tableau et ainsi qu'une mise en page par des styles Css.

• Télécharger le fichier compressé filtrer-un-tableau.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

Comme vous le constatez, la décompression livre le fichier de la page Web, index.htm, accompagné de sa feuille de styles dans le sous dossier Css.

• Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,

Nous trouvons bien le tableau des personnes énumérées. Mais à ce stade bien entendu, si vous tapez des lettres dans la zone de recherche, aucun filtre ne s'exerce encore.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

La construction Html à analyser est embarquée dans le calque (balise Div) associé au style conteneur. La zone de recherche est une zone de texte associée au style zoneSaisie. Elle porte l'identifiant maRecherche. Cet identifiant est important pour pouvoir la piloter par le code Javascript. Durant la saisie, à chaque fois qu'une touche frappée est relâchée (onkeyup), elle appelle la fonction filtrer. Cette fonction existe déjà dans la section de script, en bas du code Html. Mais naturellement, elle est vide pour l'instant. Son attribut placeholder est très intéressant. Le texte guide qu'il affiche dans la zone de saisie s'évapore dès qu'une première lettre est tapée.

...
<div class="conteneur">
<h2>Filtrer une table</h2>
<p>Recherche sur le nom dans la zone de saisie.</p>

<input class="zoneSaisie" type="text" placeholder="Recherche sur les noms et prénoms..." id="maRecherche" onkeyup="filtrer()">

<table class="tableau" id="tableau">
<tr>
<th style="width:60%;">Prénom Nom</th>
<th style="width:40%;">Pays</th>
</tr>
<tr>
<td>Adame Marc</td>
<td>Monsieur</td>
</tr>
<tr>
<td>Aijaune Giles</td>
<td>Monsieur</td>
...

C'est ensuite que survient le tableau avec l'élément Html table. Il porte l'identifiant tableau. Une fois encore ce dernier va nous être utile pour récupérer toutes les lignes qu'il contient afin de les parcourir et chercher les cellules qui proposent effectivement la suite de lettres tapées par l'utilisateur. Chaque ligne (tr) est constituée de deux colonnes (td). La recherche doit s'exercer sur les noms, donc sur la première colonne de chaque ligne.

Déclarer les variables
Pour débuter, nous avons besoin de quelques variables, notamment pour piloter le tableau et ses lignes.

• Dans les bornes de la fonction, en bas du code Html, ajouter les déclarations suivantes :

<script>
function filtrer()
{
var filtre, tableau, ligne, cellule, i, texte;
}
</script>

La variable filtre doit être utilisée pour récupérer le texte cherché, tapé dans la zone de saisie. La variable tableau parle d'elle-même. Elle doit pointer sur le tableau par son identifiant. C'est ainsi que la variable ligne pourra exploiter l'une de ses méthodes pour stocker la collection de lignes qu'il contient. Grâce à elle, nous allons pouvoir les parcourir toutes et ainsi récupérer tour à tour le contenu des cellules à comparer avec l'expression tapée. C'est la raison de la déclaration de la variable cellule. La variable i est une variable de boucle. Enfin, la variable texte doit servir à récupérer chaque contenu de cellule à confronter avec le terme de recherche.

Récupérer le texte cherché
Maintenant, nous devons commencer par stocker le texte de recherche dans la variable filtre. Comme vous le savez, c'est la méthode getElementById de l'objet Javascript document qui permet de pointer sur un élément Html reconnu par son identifiant.

• Après les déclarations, ajouter la ligne Javascript suivante :

...
filtre = document.getElementById("maRecherche") .value.toUpperCase();
...

La propriété value de l'élément Html ainsi récupéré permet d'accéder à son contenu. Grâce à la méthode toUpperCase, nous le transformons en majuscules pour éviter les différences de casse dans les comparaisons. Nous le comprendrons en temps voulu. Désormais, le texte de recherche converti en majuscules est donc stocké dans la variable filtre.

Récupérer les lignes du tableau Html
Désormais, pour récupérer toutes les lignes du tableau, nous devons commencer par pointer sur ce dernier, naturellement toujours grâce à la méthode getElementById. C'est ensuite une autre méthode héritée par l'objet ainsi créé qui permettra de récupérer la collection des lignes qu'il contient.

• A la suite du code de la fonction, ajouter les deux instructions Javascript suivantes :

...
tableau = document.getElementById("tableau");
ligne = tableau.getElementsByTagName("tr");
...

Nous stockons tout d'abord le tableau dans la variable objet tableau. Dès lors, il offre une méthode très précieuse qui se nomme getElementsByTagName. Comme son nom anglais l'indique, elle permet de récupérer tous les éléments qu'il contient par reconnaissance du nom de la balise. En lui transmettant la valeur tr en paramètre, Nous récupérons la collection des lignes de ce tableau désormais stockées dans le tableau de variables ligne. C'est grâce à ce tableau de variables que nous allons maintenant pouvoir parcourir toutes les lignes une à une à la recherche des concordances.

Parcourir les lignes du tableau Html
Et c'est avec une classique boucle for que nous allons pouvoir partir de la première ligne qu'il recèle jusqu'à la dernière.

• A la suite du code de la fonction, créer la boucle for comme suit :

...
for (i = 0; i < ligne.length; i++)
{
cellule = ligne[i].getElementsByTagName("td")[0];
}
...

C'est la propriété length d'un tableau de variables qui renvoie le nombre d'éléments qu'il contient. Comme nous partons de l'indice zéro, nous nous arrêtons une unité avant (< ligne.length) sans oublier d'incrémenter la variable de boucle (i++). Puis, à chaque passage dans la boucle, nous récupérons le contenu de la première cellule pour la ligne en cours d'analyse. C'est une fois encore la méthode getElementsByTagName qui permet de récupérer la collection des balises td que chaque ligne contient. Nous le savons, elles ne sont constituées que de deux colonnes. Nous prélevons donc le contenu de la première à l'indice zéro (getElementsByTagName("td")[0]). Et ce contenu est donc stocké dans la variable cellule.

Il va donc changer à chaque passage. Avant cela, nous devons le comparer aux termes cherchés pour savoir si la ligne doit être masquée ou non. Mais tout d'abord, une sécurité est nécessaire.

• A la suite du code de la boucle, ajouter l'instruction conditionnelle suivante :

...
if(cellule)
{

}
...

En effet, nous parcourons les lignes d'un tableau. Nous croisons donc des éléments td mais aussi des éléments tr. Pour que la comparaison à venir ne soit pas compromise et ne fasse pas avorter le code, nous nous assurons que nous sommes bien dans un élément de cellule.

Récupérer le texte de chaque ligne
Cette variable cellule représente donc l'élément Html td désignant la première cellule en cours d'analyse dans la boucle. Et pour tout élément Html, la propriété innerText permet d'accéder à son contenu pour le récupérer.

• Dans l'instruction conditionnelle, ajouter l'instruction Javascript suivante :

...
texte = cellule.innerText;
...

Masquer les lignes non concordantes
Maintenant que les contenus des premières cellules de chaque ligne sont prélevés tour à tour et stockés temporairement dans la variable texte, nous allons pouvoir les confronter au texte de recherche saisi dans la zone maRecherche. Souvenez-vous, son contenu est mémorisé dans la variable filtre. Et en Javascript, c'est la méthode indexOf qui permet de savoir si une expression porte un terme cherché. Elle répond par un indicateur de position. Lorsqu'elle renvoie la valeur -1, elle indique que le terme n'a pas été trouvé. C'est ce que nous devons donc tester à l'aide d'une instruction conditionnelle.

• A la suite du code de la boucle, créer l'instruction conditionnelle suivante :

...
if (texte.toUpperCase().indexOf(filtre) > -1)
{

}
else
{

}
...

Grâce à la méthode toUpperCase, nous transformons tout d'abord le contenu de la cellule en cours d'analyse en majuscule. Ainsi, nous ne nous soucions pas des différences de casse puisque nous l'avons dit, la variable filtre stocke elle-même le texte de recherche en majuscule. Dès lors, nous lui appliquons la méthode indexOf sur le texte de recherche passé en paramètre.

Filtrer le tableau
Donc si cette méthode retourne bien une position (>-1), nous devons conserver la ligne en cours car elle est concordante. Dans le cas contraire (else), nous devons la masquer. Et pour cela, nous devons agir sur l'attribut Css display de la cellule en cours.

• Dans les branches de l'instruction conditionnelle, ajouter les lignes respectives suivantes :

...
if (texte.toUpperCase().indexOf(filtre) > -1)
{
ligne[i].style.display = "";
}
else
{
ligne[i].style.display = "none";
}
...

Lorsque la recherche du terme échoue (else), nous masquons la ligne en réglant l'attribut display à none. Lorsqu'elle est avérée en revanche, nous effaçons ("") les précédents potentiels réglages entrepris par une précédente recherche pour garder la ligne ou la réafficher.

Il est temps de tester le résultat.

• Enregistrer les modifications (CTRL + S),
• Basculer sur le navigateur Web (ALT + Tab),
• Puis, rafraîchir la page (F5),
• Dans la zone de recherche, taper d'abord la lettre a,

Quelques enregistrements disparaissent. Le tableau filtre automatiquement tous les noms ne proposant pas cette lettre, grâce au code Javascript.

• A la suite, taper par exemple la lettre u,

Cette fois, seuls subsistent trois enregistrements. Il s'agit des seuls offrant cette succession de deux lettres dans l'ordre.



Nous avons donc démontré une astuce fort intéressante pour proposer des résultats de recherche instantanés sur un site Web et ce, par le code client, donc sans solliciter le serveur.

Le code Javascript que nous avons accompli pour aboutir cette solution reste relativement simple :

function filtrer()
{
var filtre, tableau, ligne, cellule, i, texte;

filtre = document.getElementById("maRecherche") .value.toUpperCase();
tableau = document.getElementById("tableau");
ligne = tableau.getElementsByTagName("tr");

for (i = 0; i < ligne.length; i++)
{
cellule = ligne[i].getElementsByTagName("td")[0];
if(cellule)
{
texte = cellule.innerText;
if (texte.toUpperCase().indexOf(filtre) > -1)
{
ligne[i].style.display = "";
}
else
{
ligne[i].style.display = "none";
}
}
}
}