Comment utiliser l’outil de recherche dans votre application#
Dans ce didacticiel, vous allez apprendre à ajouter une fonctionnalité de recherche à votre application web. Cette fonctionnalité permettra aux utilisateurs de rechercher des éléments dans une liste en temps réel.
Étapes pour implémenter la recherche#
- Créer un champ de recherche dans le fichier
index.html. - Ajouter du code JavaScript pour écouter les entrées de l’utilisateur.
- Filtrer les éléments de la liste en fonction de la recherche.
- Mettre à jour l’affichage en temps réel.
Exemple de code#
Voici un exemple de code pour implémenter la recherche :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Recherche en temps réel</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Rechercher..." />
<ul id="list">
<li>Chien</li>
<li>Gato</li>
<li>Oiseau</li>
<li>Chameau</li>
</ul>
<script>
const searchInput = document.getElementById("searchInput");
const list = document.getElementById("list");
const items = list.querySelectorAll("li");
searchInput.addEventListener("input", function () {
const query = this.value.toLowerCase();
items.forEach((item) => {
const text = item.textContent.toLowerCase();
if (text.includes(query)) {
item.style.display = "block";
} else {
item.style.display = "none";
}
});
});
</script>
</body>
</html>Conseils pour une meilleure expérience utilisateur#
- Utilisez
debouncepour réduire les appels de recherche trop fréquents. - Ajoutez un indicateur de chargement pendant la recherche.
- Fournissez des suggestions de recherche en temps réel.
Pour en savoir plus, consultez la documentation officielle : MDN Web Docs - Recherche en temps réel.
Si vous avez des questions, n’hésitez pas à contacter l’équipe d’assistance : support@exemple.com.