Créer une barre de recherche interactive avec JavaScript

📑 Structure HTML de Base

La première étape consiste à définir la structure HTML de la barre de recherche et de l'espace où les résultats seront affichés.

<div class="search-container">
    <input type="text" id="search-box" class="search-box" placeholder="Rechercher..." />
    <table class="search-results" id="results-table">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
        <!-- Les résultats de la recherche apparaîtront ici -->
        </tbody>
    </table>
</div>

Ici, nous avons un champ de saisie pour la recherche et une table pour afficher les résultats. La table est initialement vide et sera remplie dynamiquement en fonction des recherches de l'utilisateur.

🎨 Style CSS pour la Barre de Recherche

Stylisons notre barre de recherche et la table des résultats pour une meilleure apparence.

.search-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-box {
    width: 50%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #7b61ff;
    border-radius: 4px;
    margin-bottom: 20px;
}

.search-results {
    width: 80%;
    border-collapse: collapse;
}

.search-results th,
.search-results td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.search-results th {
    background-color: #f4f4f4;
}

.search-results tr:hover {
    background-color: #f1f1f1;
}

Ces styles assurent que la barre de recherche et les résultats sont bien présentés et réactifs sur différents appareils.

🧠 Implémenter la Logique de Recherche avec JavaScript

Maintenant, ajoutons la logique JavaScript pour gérer la saisie de l'utilisateur et afficher les résultats correspondants.

🔧 Étape 1 : Créer les données de recherche

Nous commençons par définir un tableau de données simulées, que nous allons utiliser pour effectuer la recherche :

// Exemple de données de recherche
const data = [
    { nom: 'JavaScript', description: 'Langage de programmation web.' },
    { nom: 'HTML', description: 'Langage de balisage pour créer des pages web.' },
    { nom: 'CSS', description: 'Feuilles de style en cascade pour le design web.' },
    { nom: 'Python', description: 'Langage de programmation polyvalent.' },
    { nom: 'Java', description: 'Langage de programmation orienté objet.' }
];

Ici, nous avons créé un tableau d'objets contenant le nom et la description de plusieurs technologies. Tu peux bien sûr ajouter plus d'éléments selon tes besoins.

⚙️ Étape 2 : Sélectionner les éléments du DOM

Ensuite, nous récupérons les éléments du DOM (Document Object Model) que nous allons manipuler pour la recherche :

// Sélectionner les éléments du DOM
const searchBox = document.getElementById('search-box');
const resultsTableBody = document.querySelector('#results-table tbody');

Dans cet extrait, searchBox représente la barre de recherche où l'utilisateur va taper son texte, et resultsTableBody correspond au corps de la table où nous afficherons les résultats.

📩 Étape 3 : Ajouter l'écouteur d'événement

Nous allons maintenant ajouter un écouteur d'événement sur la barre de recherche pour détecter lorsque l'utilisateur commence à taper :

// Ajouter un écouteur d'événement sur la barre de recherche
searchBox.addEventListener('input', function(event) {
    const query = event.target.value.trim().toLowerCase();
    resultsTableBody.innerHTML = '';
    
    if (query.length >= 3) {
        // Filtrer les données en fonction de la requête
        const filteredData = data.filter(item => 
            item.nom.toLowerCase().includes(query) || 
            item.description.toLowerCase().includes(query) 
        )
    }
});

Cet écouteur d'événement se déclenche chaque fois que l'utilisateur tape dans la barre de recherche. Nous convertissons ensuite la saisie en minuscule et nous supprimons les espaces inutiles avec trim() pour améliorer la correspondance de recherche. La vérification de la longueur de la requête (au moins 3 caractères) permet d'éviter des recherches inutiles sur des saisies trop courtes.

✅ Étape 4 : Filtrer et afficher les résultats

Enfin, nous filtrons les données en fonction de la saisie de l'utilisateur et affichons les résultats dans la table :

// Filtrer les données en fonction de la requête
const filteredData = data.filter(item => 
    item.nom.toLowerCase().includes(query) || 
    item.description.toLowerCase().includes(query)
);

// Afficher les résultats
if (filteredData.length > 0) {
    filteredData.forEach(item => {
        const row = document.createElement('tr');
        const nomCell = document.createElement('td');
        nomCell.textContent = item.nom;
        row.appendChild(nomCell);
        
        const descCell = document.createElement('td');
        descCell.textContent = item.description;
        row.appendChild(descCell);

        resultsTableBody.appendChild(row);
    });
} else {
    const row = document.createElement('tr');
    const cell = document.createElement('td');
    cell.colSpan = 2;
    cell.textContent = 'Aucun résultat trouvé.';
    row.appendChild(cell);
    resultsTableBody.appendChild(row);
}

Ici, nous filtrons les données en utilisant filter() pour trouver les éléments dont le nom ou la description contiennent la requête de l'utilisateur. Ensuite, nous créons des éléments tr et td pour chaque résultat, que nous ajoutons à la table. Si aucun résultat n'est trouvé, nous affichons un message à l'utilisateur.

🧪 Exemple pratique : Barre de recherche interactive

Voici un exemple interactif où vous pouvez tester la barre de recherche. Tapez au moins 3 caractères pour voir les résultats correspondants s'afficher dynamiquement.