Comment faire une recherche Lenovo dans Vue

Avec le développement continu de la technologie Internet, les moteurs de recherche sont devenus un canal important permettant aux utilisateurs d'obtenir des informations. En génie logiciel, l’application de la technologie des moteurs de recherche est de plus en plus répandue. Par exemple, lors du développement d’un site Web ou d’une application, nous devons généralement mettre en œuvre une forme de fonction de recherche pour aider les utilisateurs à trouver rapidement les informations dont ils ont besoin.

Dans la technologie front-end actuelle, Vue.js est un framework JavaScript très populaire qui adopte le modèle MVVM et possède des fonctionnalités telles que la liaison de données réactive et la composantisation. Si vous devez implémenter une fonctionnalité de recherche dans Vue.js, comment devez-vous procéder ? Cet article présentera l'ensemble du processus, depuis la recherche Lenovo jusqu'au rendu des données.

1. Implémenter la recherche Lenovo

Avant d'implémenter la fonction de recherche, nous devons d'abord comprendre la recherche Lenovo. La recherche associative signifie que pendant le processus de saisie des mots-clés, à mesure que le contenu saisi continue de changer, le système proposera automatiquement des résultats de recherche pertinents, afin que les utilisateurs puissent trouver les informations cibles plus rapidement.

Pour surveiller les événements d'entrée du champ de recherche, vous pouvez utiliser la directive v-model dans Vue.js. Lorsque l'utilisateur saisit du texte, la directive v-model liera la valeur de la zone de saisie à l'attribut data de l'instance Vue, et les données liées seront automatiquement mises à jour chaque fois que l'utilisateur saisit du texte.

Nous pouvons surveiller l'événement d'entrée pour afficher les résultats de recherche Lenovo lors de la saisie. L'implémentation spécifique est la suivante :

<template>
  <div>
    <input v-model="keyword" @input="debounce" />
    <ul v-show="results.length">
      <li v-for="(item, index) in results" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      results: []
    }
  },
  methods: {
    debounce() {
      // 对搜索请求进行防抖处理，避免频繁请求
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getResults()
      }, 500)
    },
    getResults() {
      // 发送搜索请求，获取联想搜索结果
      fetch('/search?q=' + this.keyword)
        .then(res => res.json())
        .then(data => {
          this.results = data.results
        })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons la fonction anti-rebond pour anti-rebond l'événement d'entrée. Cela peut efficacement éviter les demandes de recherche fréquentes causées par des utilisateurs tapant trop vite et réduire la pression sur le serveur. Dans la fonction getResults, nous envoyons une requête via l'API fetch pour obtenir les résultats de recherche Lenovo. Enregistrez les résultats de la recherche dans l'attribut results de l'instance Vue, puis liez directement l'attribut results dans le modèle pour afficher les résultats de la recherche prédictive.

2. Implémenter le rendu des données

Grâce aux étapes ci-dessus, nous avons implémenté la fonction de recherche Lenovo. Ensuite, nous devons lier les résultats de la recherche aux données réelles pour obtenir un rendu dynamique des résultats. Considérant que les résultats de recherche sont généralement affichés sous forme de liste, nous pouvons utiliser la modularisation pour compléter cette partie de la fonction.

Tout d'abord, nous devons écrire un composant de données pour gérer les données réelles. Dans ce composant, nous pouvons utiliser des accessoires pour accepter les paramètres transmis par d'autres composants, puis obtenir et initialiser les données via les données et les fonctions de cycle de vie montées.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    keyword: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // 根据关键词加载实际数据
    this.loadData()
  },
  methods: {
    loadData() {
      fetch('/data?q=' + this.keyword)
        .then(res => res.json())
        .then(data => {
          this.list = data.list
        })
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons des accessoires pour accepter le paramètre mot-clé et obtenir et initialiser les données via la fonction loadData. Enregistrez les données obtenues dans l'attribut list de l'instance Vue, puis liez directement l'attribut list dans le modèle pour terminer le rendu des données réelles.

Ensuite, nous devons réaliser le lien entre le composant de données et le composant de recherche via le composant parent. La méthode de mise en œuvre spécifique consiste à surveiller les modifications de la variable mot-clé dans le composant parent et à transmettre la variable au composant de données.

<template>
  <div>
    <SearchBox @search="onSearch" />
    <DataList :keyword="keyword" />
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue'
import DataList from './DataList.vue'

export default {
  components: {
    SearchBox,
    DataList
  },
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    onSearch(keyword) {
      this.keyword = keyword
    }
  }
}
</script>

Dans le code ci-dessus, nous avons utilisé deux composants, SearchBox et DataList. Écoutez l'événement de recherche dans SearchBox via l'événement @search, puis transmettez les mots-clés de recherche au composant DataList. De cette manière, lorsque le mot-clé de recherche change, la modification de l'attribut du mot-clé dans la DataList sera déclenchée, mettant ainsi automatiquement à jour les résultats de la recherche.

3. Résumé

Grâce à l'introduction ci-dessus, nous pouvons voir que l'implémentation de la fonction de recherche dans Vue.js n'est pas une question très compliquée. Utilisez la directive v-model pour surveiller l'événement d'entrée du champ de recherche, puis utilisez l'API fetch pour envoyer une requête afin d'obtenir les résultats de la recherche. En termes de rendu des données, nous pouvons utiliser des idées de composantisation pour obtenir un rendu dynamique des données réelles. Enfin, le composant de données et le composant de recherche sont liés via le composant parent pour réaliser une fonction de recherche complète.

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!