🔎 Créer une Mini Barre de Recherche avec JavaScript

L’art de la recherche en temps réel avec includes + filter + input event

Imaginez un utilisateur…
Il tape J dans l’input.
La liste se met à jour instantanément.
Il tape Ja… la liste se réduit.
Il tape Java… il ne reste que « JavaScript ».

Et en arrière-plan, vous murmurez :

« J’ai fait ça avec seulement 15 lignes de JavaScript. » 😏

Cet article révèle la magie derrière ce moment.

🧠 1. Logique d’une Search Bar (Voir la Vue d’Ensemble)

Avant d’écrire la moindre ligne de code, clarifions une chose :

Que fait réellement une barre de recherche ?

• L’utilisateur tape quelque chose ✍️
• JavaScript capture cette saisie 🎯
• Il la compare avec les éléments d’une liste 🔍
• Les éléments correspondants sont affichés, les autres sont masqués 🚪

Tout repose donc sur ce trio :

• input event → « Qu’a tapé l’utilisateur ? »
• includes() → « Ce texte existe-t-il ici ? »
• filter / condition → « Afficher ou masquer ? »

Google fait cela à l’échelle de milliards de dollars.
Nous, on construit la version mini, mignonne et pédagogique 😄

🧱 2. HTML – La Structure de Base (Pas de Muscles Sans Squelette)

<input 
  type="text" 
  id="searchInput" 
  placeholder="Rechercher un langage de programmation..." 
/>

<ul id="languageList">
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>TypeScript</li>
  <li>React</li>
  <li>Vue</li>
  <li>Angular</li>
</ul>

🔍 Que Trouve-t-on Ici ?

• input
  → L’endroit où l’utilisateur tape
• ul + li
  → La liste que nous allons filtrer

📌 Nous l’avons volontairement gardée simple.
Car l’objectif n’est pas le HTML, mais la logique JavaScript.

🎯 3. Entrer dans JavaScript – Rencontre avec le DOM

const searchInput = document.getElementById("searchInput");
const listItems = document.querySelectorAll("#languageList li");

🧠 Qu’avons-nous fait ?

• Récupéré l’élément input
• Sélectionné tous les éléments de la liste

JavaScript peut maintenant contrôler, masquer ou afficher ces éléments.

🎈 Petite note mais très importante :
querySelectorAll retourne une NodeList.
Elle se comporte comme un tableau, mais n’en est pas vraiment un.

⚡ 4. input Event – La Magie du Temps Réel ✨

searchInput.addEventListener("input", function () {
  console.log("L'utilisateur est en train d’écrire...");
});

🎉 Pourquoi l’input Event est Génial ?

• Il se déclenche à chaque frappe
• Pas besoin d’appuyer sur Entrée
• UX = 🧠 + ❤️

📌 Alternatives :

• keyup → ancien mais encore utilisé
• change → se déclenche quand on quitte l’input (pas ce qu’on veut)

Search bar = input event
Aucune discussion possible 😄

🔤 5. Qu’a Tapé l’Utilisateur ? (La Vérité sur value)

const searchText = searchInput.value;

Mais attention, voici un gros piège 🧨

"JavaScript".includes("javascript"); // false

😱 Parce que JavaScript est sensible à la casse.

🛡️ 6. Échapper à la Sensibilité à la Casse (La Règle d’Or)

const searchText = searchInput.value.toLowerCase();

Et pour les éléments de la liste :

const text = item.textContent.toLowerCase();

📌 Règle d’or :
Toujours normaliser les données utilisateur
(minuscules, trim, etc.)

❤️ 7. includes() – Le Cœur de la Search Bar

text.includes(searchText);

Que Fait Cette Méthode ?

• Si ça existe → true
• Sinon → false

Simple.
Rapide.
Lisible.

includes() = « Est-ce que ça existe ? »
La loupe du détective 🔍

🎭 8. La Logique Principale – Afficher / Masquer

searchInput.addEventListener("input", function () {
  const searchText = searchInput.value.toLowerCase();

  listItems.forEach(item => {
    const text = item.textContent.toLowerCase();

    if (text.includes(searchText)) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  });
});

🧩 Décortiquons le Code

🔹 forEach

On parcourt chaque élément de la liste :

« Toi, toi, toi… et toi aussi. » 😄

🔹 if (includes)

S’il y a une correspondance :

display: block

Sinon :

display: none

C’est la manipulation du DOM dans sa forme la plus simple.

🧪 9. Approche Plus Moderne – Avec filter

searchInput.addEventListener("input", () => {
  const value = searchInput.value.toLowerCase();

  Array.from(listItems).filter(item => {
    item.style.display = item.textContent
      .toLowerCase()
      .includes(value)
      ? "block"
      : "none";
  });
});

📌 Qu’avons-nous appris ici ?

• Array.from() → Transforme une NodeList en tableau
• Opérateur ternaire → Code plus propre et élégant

Quelqu’un qui voit ce code dira :

« Ce développeur maîtrise JavaScript. » 😎

🚀 10. Cas d’Utilisation Réels

Où peut-on utiliser cette mini search bar ?

• 🛒 Recherche de produits e-commerce
• 👥 Listes d’utilisateurs
• 📂 Filtrage de fichiers
• 💬 Recherche dans les messages de chat
• 🎮 Commandes de jeu

Un petit exemple peut ouvrir la porte à de grands projets.

💎 11. Conseils Professionnels

🔹 Afficher tout si l’input est vide

if (searchText === "") {
  item.style.display = "block";
}

🔹 Ajouter un message « Aucun résultat trouvé »

Score UX +10 ⭐

🔹 Pour de grandes listes

• Utiliser le debounce
• Éviter les mises à jour DOM inutiles

🧠 Conclusion – Qu’avez-vous Gagné ?

✔ input event
✔ includes()
✔ logique de filter
✔ contrôle du DOM
✔ un véritable composant UI

Vous n’êtes plus simplement quelqu’un qui écrit du code —
vous êtes un développeur frontend qui pense à l’expérience utilisateur 🦸‍♂️