Filtrer des données avec une liste déroulante HTML et Javascript

Étape 1 : Créer la Liste Déroulante

Tout d'abord, nous allons créer une simple liste déroulante en HTML. Celle-ci contiendra différentes options qui permettront de filtrer les données affichées dans un tableau.

<label for="filter">Filtrer par catégorie :</label>
<select id="filter">
    <option value="all">Toutes les catégories</option>
    <option value="technologie">Technologie</option>
    <option value="science">Science</option>
    <option value="litterature">Littérature</option>
</select>

Ici, nous avons une liste déroulante avec quatre options : "Toutes les catégories", "Technologie", "Science", et "Littérature". Ces options seront utilisées pour filtrer les données dans notre tableau.

Explication du Code

• <label for="filter"> : Associe une étiquette à la liste déroulante: c'est le texte qui sera affiché avant la liste déroulante.
• <select id="filter"> : Définit la liste déroulante elle-même avec l'id filter pour pouvoir l'identifier dans le script JavaScript.
• <option value="..."> : Chaque option représente une catégorie. L’attribut value est essentiel pour le filtrage, car il sera utilisé dans le code JavaScript pour savoir quelle option est sélectionnée.

Étape 2 : Créer un Tableau de Données

Ensuite, nous allons créer un tableau de données statique qui sera filtré en fonction de la sélection dans la liste déroulante.

<table id="data-table">
    <thead>
        <tr>
            <th>Titre</th>
            <th>Catégorie</th>
        </tr>
    </thead>
    <tbody>
        <tr data-category="technologie">
            <td>Introduction à JavaScript</td>
            <td>Technologie</td>
        </tr>
        <tr data-category="science">
            <td>Découvertes en Physique</td>
            <td>Science</td>
        </tr>
        <tr data-category="litterature">
            <td>Classiques de la Littérature</td>
            <td>Littérature</td>
        </tr>
        <tr data-category="technologie">
            <td>Avancées en IA</td>
            <td>Technologie</td>
        </tr>
    </tbody>
</table>

Ce tableau affiche des articles de différentes catégories : Technologie, Science, et Littérature. Chaque ligne est associée à une catégorie via l'attribut data-category pour faciliter le filtrage.

Explication du Code

• <table id="data-table"> : Définit le tableau de données. L'id "data-table" permettra de le cibler facilement dans le script JavaScript.
• <thead> et <tr> : La section <thead> contient une ligne d’en-tête <tr> pour les titres de colonne.
• <th> : Définit les en-têtes des colonnes. Ici, il y a deux colonnes : "Titre" et "Catégorie".
• <tbody> : La section <tbody> contient les données du tableau.
• <tr data-category="..."> : Chaque ligne de données est une balise <tr> qui contient l'attribut data-category pour indiquer la catégorie. Cela facilitera le filtrage en JavaScript.
• <td> : Définit une cellule de données dans une ligne. La première cellule contient le titre de l’article et la seconde, sa catégorie.

Étape 3 : Filtrer les Données avec JavaScript

Maintenant, nous allons ajouter du JavaScript pour réagir à la sélection dans la liste déroulante et filtrer les lignes du tableau.

<script>
const filterSelect = document.getElementById('filter');
const rows = document.querySelectorAll('#data-table tbody tr');

filterSelect.addEventListener('change', function() {
    const selectedCategory = this.value;

    rows.forEach(row => {
        const category = row.getAttribute('data-category');

        if (selectedCategory === 'all' || category === selectedCategory) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
});
</script>

Ce script écoute les changements dans la liste déroulante. Lorsque l'utilisateur sélectionne une option, chaque ligne du tableau est comparée à la catégorie sélectionnée. Si la catégorie de la ligne correspond à la sélection, elle est affichée, sinon, elle est masquée.

Explication du Code

• const filterSelect = document.getElementById('filter'); : Sélectionne l'élément de la liste déroulante en utilisant son id filter, pour pouvoir interagir avec cet élément dans le script JavaScript.
• const rows = document.querySelectorAll('#data-table tbody tr'); : Sélectionne toutes les lignes du tableau dans la section <tbody> afin de les filtrer en fonction de la catégorie sélectionnée.
• filterSelect.addEventListener('change', function() {...}); : Ajoute un écouteur d'événement change à la liste déroulante, qui déclenche la fonction chaque fois qu'une nouvelle option est sélectionnée.
• const selectedCategory = this.value; : Récupère la valeur de l'option sélectionnée dans la liste déroulante et l'assigne à la variable selectedCategory.
• rows.forEach(row => { ... }); : Boucle sur chaque ligne du tableau pour appliquer un filtre basé sur la catégorie sélectionnée.
• const category = row.getAttribute('data-category'); : Récupère la valeur de l'attribut data-category de chaque ligne, qui représente la catégorie associée à cette ligne.
• if (selectedCategory === 'all' || category === selectedCategory) : Vérifie si la catégorie sélectionnée est "all" (toutes les catégories) ou si elle correspond à la catégorie de la ligne en cours.
• row.style.display = ''; : Affiche la ligne si elle correspond à la sélection (ou si "all" est sélectionné), en laissant la propriété display vide.
• row.style.display = 'none'; : Masque la ligne si elle ne correspond pas à la catégorie sélectionnée.

Exemple Pratique

Essayez de sélectionner une catégorie dans la liste déroulante ci-dessous pour voir le tableau se mettre à jour automatiquement :