Recherche de produits

🎯 Objectif

Ajouter une recherche en temps réel qui filtre les produits par leur titre.

📖 Contexte

Les produits sont déjà chargés depuis l'API et stockés dans la variable produits. On va maintenant les filtrer côté client à chaque frappe dans le champ de recherche.

filter() : garder ce qui nous intéresse

filter() crée un nouveau tableau en ne gardant que les éléments qui passent un test :

const nombres = [1, 2, 3, 4, 5]
const pairs = nombres.filter(function(n) {
  return n % 2 === 0  // Garde si pair
})
// pairs → [2, 4]

Recherche insensible à la casse

Pour que "mascara" trouve aussi "Mascara", on met tout en minuscules :

const titre = "Essence Mascara"
titre.toLowerCase()  // → "essence mascara"
titre.toLowerCase().includes("mascara")  // → true

L'événement "input"

L'événement input se déclenche à chaque frappe dans un champ texte. C'est parfait pour une recherche en temps réel :

champ.addEventListener("input", function() {
  console.log(champ.value)  // Affiche le texte à chaque frappe
})

📝 Consigne

1. Complète filtrerProduits(texte) : utilise .filter() pour garder les produits dont le titre contient le texte recherché (en minuscules)
2. Ajoute un addEventListener("input") sur le champ #recherche : à chaque frappe, filtre les produits et réaffiche le tableau