Comment implémenter le champ de recherche et les suggestions de recherche dans Vue ?

Vue est un framework JavaScript populaire permettant de créer rapidement des applications Web modernes. Dans de nombreuses applications Web, les champs de recherche constituent un élément essentiel, permettant aux utilisateurs de trouver rapidement ce dont ils ont besoin dans de grandes quantités de données. Vue fournit de nombreux outils et techniques pour implémenter le champ de recherche et sa fonctionnalité de suggestion.

Dans cet article, nous explorerons comment implémenter des champs de recherche et des suggestions de recherche à l'aide de Vue et d'autres technologies connexes.

Composant de zone de recherche

Tout d'abord, créons un composant de zone de recherche. Ce composant permettra à l'utilisateur de saisir une requête de recherche et de la communiquer avec le serveur backend pour obtenir les résultats de recherche correspondants.

Le code HTML clé est le suivant :

<template>
  <div>
    <form @submit.prevent="submit">
      <input v-model="query" type="text" placeholder="输入查找内容" />
      <button type="submit">搜索</button>
    </form>
    <ul v-if="results.length">
      <li v-for="result in results" v-text="result"></li>
    </ul>
  </div>
</template>

Le code ci-dessus définit un modèle dans lequel l'élément de formulaire contient une zone de saisie de texte et un bouton de soumission. La zone de saisie de texte utilise la directive v-model pour lier sa valeur à un attribut de données nommé requête. Cette propriété sera automatiquement mise à jour lorsque l'utilisateur saisira une requête.

Lorsque l'utilisateur clique sur le bouton Rechercher, nous déclencherons la méthode de soumission, qui fera soit une requête API au serveur backend, soit effectuera une recherche en utilisant des données locales. Dans cet article, nous supposons que nous utilisons la bibliothèque axios pour effectuer des requêtes au serveur.

import axios from 'axios'

export default {
  data() {
    return {
      query: '',
      results: []
    }
  },
  methods: {
    async submit() {
      try {
        const response = await axios.get('/search', {
          params: { q: this.query }
        })
        this.results = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

Le code ci-dessus définit un composant Vue, qui définit la méthode de soumission. Cette méthode récupère les résultats de la recherche du serveur principal et les stocke dans une propriété de données nommée results.

Mise en œuvre des suggestions de recherche

Maintenant que nous avons créé un composant de champ de recherche de base, il est toujours difficile à utiliser si l'utilisateur ne sait pas quoi rechercher. Dans ce cas, les suggestions de recherche peuvent aider les utilisateurs à comprendre rapidement les options de recherche disponibles.

Nous pouvons utiliser les propriétés calculées de Vue pour implémenter les suggestions de recherche. Une propriété calculée est un type spécial de propriété de données qui est calculé dynamiquement en fonction des valeurs d'autres propriétés de données. Dans notre exemple, nous utiliserons des propriétés calculées pour calculer les suggestions de recherche.

export default {
  data() {
    return {
      query: '',
      results: [],
      suggestions: []
    }
  },
  computed: {
    async suggestedQueries() {
      if (!this.query) {
        return []
      }
      try {
        const response = await axios.get('/suggestions', {
          params: { q: this.query }
        })
        return response.data
      } catch (error) {
        console.error(error)
        return []
      }
    }
  },
  methods: {
    async submit() {
      try {
        const response = await axios.get('/search', {
          params: { q: this.query }
        })
        this.results = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}

Dans le code ci-dessus, nous avons ajouté une nouvelle propriété calculée appelée suggestQueries. Lorsque la requête change, cette propriété est automatiquement recalculée et les requêtes de recherche suggérées sont obtenues à partir du serveur backend.

Afin d'afficher ces suggestions dans l'interface utilisateur, nous pouvons modifier notre modèle HTML et ajouter un nouveau composant avec la directive v-for :

<template>
  <div>
    <form @submit.prevent="submit">
      <input v-model="query" type="text" placeholder="输入查找内容" />
      <button type="submit">搜索</button>
    </form>
    <ul v-if="suggestedQueries.length">
      <li v-for="query in suggestedQueries" v-text="query"></li>
    </ul>
    <ul v-if="results.length">
      <li v-for="result in results" v-text="result"></li>
    </ul>
  </div>
</template>

Maintenant, en As les utilisateurs saisissent une requête, nous obtenons et affichons automatiquement des suggestions de recherche. Lorsque l'utilisateur clique sur un élément dans les suggestions, cet élément devient la valeur dans la zone de texte et une requête est immédiatement soumise. Grâce à cette approche, nous aidons les utilisateurs à trouver rapidement ce dont ils ont besoin et leur fournissons une interface intuitive et facile à utiliser.

Conclusion

Vue fournit de nombreux outils et techniques pour mettre en œuvre le champ de recherche et sa fonctionnalité de suggestion. Grâce à eux, il n'est plus difficile de mettre en œuvre une fonction de recherche efficace et agréable. Dans la pratique, vous pouvez rencontrer des défis tels que la manière de gérer de grands ensembles de données ou de communiquer avec les serveurs back-end. Cependant, le framework Vue fournit de nombreux outils et bibliothèques pour résoudre ces problèmes, vous aidant ainsi à créer facilement des applications avec une excellente expérience de recherche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!