Fonctionnalité de recherche JavaScript | Tutoriel de programmation

Introduction

Dans ce projet, vous allez apprendre à utiliser JavaScript pour implémenter une fonctionnalité de recherche simple. Vous allez apprendre à lier l'événement input à une zone de saisie, à traiter les données de recherche et à afficher les résultats de recherche.

👀 Aperçu

démonstration de la fonctionnalité de recherche

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment lier l'événement input à une zone de saisie
Comment implémenter la méthode handleInput pour filtrer les données de recherche
Comment afficher les résultats de recherche dans une liste

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser la méthode addEventListener pour lier des événements
Utiliser la méthode filter pour filtrer un tableau selon une condition
Manipuler le DOM pour mettre à jour les résultats de recherche

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

Où :

index.html est la page principale.
css est le dossier pour stocker les styles du projet.
js/index.js est le fichier JavaScript où vous devez ajouter du code.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Afficher les résultats de recherche

Dans cette étape, vous allez implémenter la méthode render pour afficher les résultats de recherche.

Dans le fichier js/index.js, localisez la méthode render dans l'objet search.
À l'intérieur de la méthode render, ajoutez le code suivant pour générer le modèle HTML pour les résultats de recherche et mettre à jour l'élément listEl :

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

La méthode reduce est utilisée pour créer une chaîne de caractères de modèle HTML qui affiche la propriété content de chaque élément du tableau data.

Implémenter la méthode handleInput

Dans cette étape, vous allez implémenter la méthode handleInput pour traiter la fonctionnalité de recherche.

Dans le fichier js/index.js, localisez la méthode handleInput dans l'objet search.
À l'intérieur de la méthode handleInput, ajoutez le code suivant pour filtrer le tableau data en fonction de la valeur de l'entrée et puis afficher les résultats de recherche :

const value = e.target.value;
// Utiliser un minuteur pour simuler l'envoi d'une requête Ajax et la réception des données
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

La fonction setTimeout est utilisée pour simuler une opération asynchrone, telle qu'une requête Ajax, pour recevoir les données de recherche.

Lier l'événement d'entrée

Dans cette étape, vous allez apprendre à lier l'événement input à la zone de saisie et à appeler la méthode handleInput lorsque la valeur de la zone de saisie change.

Ouvrez le fichier js/index.js.
Localisez la fonction handle dans l'objet search.
À l'intérieur de la fonction handle, ajoutez le code suivant pour lier l'événement input à l'élément inputEl et appeler la méthode handleInput :

this.inputEl.addEventListener("input", this.handleInput.bind(this));

La partie bind(this) est importante pour s'assurer que this à l'intérieur de la méthode handleInput fait référence à l'objet search lui-même.

Après avoir effectué ces quatre étapes, le fichier js/index.js devrait maintenant avoir une implémentation complète de la fonctionnalité de recherche, et le projet devrait fonctionner comme prévu. L'effet final devrait être le suivant :