Implémenter les suggestions de recherche avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à implémenter une fonctionnalité de suggestions de recherche d'entrée à l'aide de Vue.js 2.x. Cette fonctionnalité est couramment utilisée dans les applications web pour fournir aux utilisateurs une liste de données correspondantes lorsqu'ils tapent dans l'entrée de recherche.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment mettre en majuscule la première lettre des en-têtes de table dans le tableau de données
• Comment implémenter la fonctionnalité de suggestions de recherche sur la base de l'entrée de l'utilisateur

🏆 Réalisations

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

• Manipuler le DOM à l'aide de directives Vue.js telles que v-for et v-model
• Créer des propriétés calculées dans Vue.js pour filtrer et afficher les résultats de recherche
• Appliquer un style de base au tableau et à l'entrée 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 :

├── index.html
└── js
    └── vue.js

Dans lequel :

• js/vue.js est le fichier Vue 2.x.
• index.html est le code de mise en page de la page et de logique d'implémentation des fonctionnalités.

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.

La fonction de suggestions de recherche n'a pas encore été implémentée.

Mettre en majuscules les en-têtes de table

Dans cette étape, vous allez apprendre à mettre en majuscule la première lettre des en-têtes de table dans le tableau de données.

1. Ouvrez le fichier index.html dans votre éditeur de code.
2. Localisez la section des en-têtes de table dans le code HTML :

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

3. La directive v-for est utilisée pour parcourir le tableau columns et afficher les en-têtes de table correspondants. Le code {{col.slice(0,1).toUpperCase() + col.slice(1)}} est utilisé pour mettre en majuscule la première lettre de chaque nom de colonne.

   • col.slice(0,1) extrait le premier caractère du nom de colonne.
   • .toUpperCase() convertit le premier caractère en majuscule.
   • + col.slice(1) concatène le premier caractère mis en majuscule avec le reste du nom de colonne.

4. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez maintenant voir les en-têtes de table avec la première lettre en majuscule.

Implémenter les suggestions de recherche

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de suggestions de recherche.

1. Dans le fichier index.html, trouvez l'entrée de recherche et le code Vue.js correspondant, et ajoutez le code suivant :

<span>Recherchez des noms : </span>
<!-- Ajoutez le code v-model -->
<input placeholder="Entrez le nom à rechercher" v-model="searchQuery" />

data: {
  searchQuery: "",
  //... autres propriétés de données
},

// Le code suivant est le code à ajouter
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
     .toLowerCase()
     .includes(this.searchQuery.toLowerCase());
    });
  }
}

2. La propriété de données searchQuery est liée à l'entrée de recherche à l'aide de la directive v-model. Cela permet à l'instance Vue.js de suivre l'entrée de l'utilisateur.
3. La propriété calculée newData filtre le tableau data en fonction de la valeur de searchQuery. Elle vérifie si la propriété name de chaque élément de données contient la requête de recherche (insensible à la casse).
4. Les données filtrées sont ensuite affichées dans le corps du tableau :

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

5. La directive v-for est utilisée pour parcourir le tableau newData et afficher chaque élément de données dans une ligne de tableau.
6. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez maintenant être capable de voir la fonctionnalité de suggestions de recherche fonctionner comme prévu.

Maintenant, vous avez terminé l'implémentation de la fonctionnalité de suggestions de recherche d'entrée dans le projet Vue.js fourni. Le résultat final est le suivant :

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.