Comment implémenter l'association de recherche dans Vue ?

Avec le développement continu de la technologie réseau, de plus en plus de sites Web et d'applications proposent des fonctions de recherche pour permettre aux utilisateurs de trouver rapidement ce dont ils ont besoin. L'association de recherche, également connue sous le nom de « remplissage automatique », est une fonction qui permet aux utilisateurs de trouver plus rapidement le contenu qu'ils souhaitent rechercher. Dans Vue, la fonction d'association de recherche peut être facilement implémentée. Cet article explique comment utiliser Vue pour créer un composant d'association de recherche simple.

Tout d'abord, vous avez besoin d'une source de données contenant les options à rechercher afin de générer une liste d'associations. Ici, nous pouvons utiliser un simple tableau avec de fausses données :

const options = [
  { value: 'Java', label: 'Java' },
  { value: 'JavaScript', label: 'JavaScript' },
  { value: 'Python', label: 'Python' },
  { value: 'Ruby', label: 'Ruby' },
  { value: 'Swift', label: 'Swift' },
  { value: 'Kotlin', label: 'Kotlin' },
  { value: 'C#', label: 'C#' },
  { value: 'Go', label: 'Go' },
  { value: 'PHP', label: 'PHP' },
  { value: 'TypeScript', label: 'TypeScript' }
]

Maintenant, nous devons créer un composant Vue qui affiche le champ de recherche et la liste de prédictions. Dans ce composant, nous allons créer un objet data pour stocker tous les états et propriétés pertinents, qui contient le terme de recherche actuel et la liste des associations à afficher. Nous présenterons également une propriété calculée Vue filteredOptions pour filtrer le tableau options en fonction du terme de recherche actuel. Enfin, nous devons ajouter quelques méthodes pour gérer les entrées de l'utilisateur et sélectionner l'élément d'association. data 对象来存储所有相关的状态和属性，其中包含当前搜索词，以及要显示的联想列表。我们还将引入一个 Vue 计算属性 filteredOptions，用于根据当前搜索词过滤 options 数组。最后，我们还需要添加一些方法，用于处理用户输入和选中联想项的操作。

<template>
  <div class="search-wrapper">
    <input type="text" v-model="searchTerm" @input="handleInput" @keydown.enter="handleEnter">
    <ul v-if="showList">
      <li v-for="(option, index) in filteredOptions" :key="index" @click="handleSelect(index)">{{ option.label }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchTerm: '',
      showList: false,
      options: [
        { value: 'Java', label: 'Java' },
        { value: 'JavaScript', label: 'JavaScript' },
        { value: 'Python', label: 'Python' },
        { value: 'Ruby', label: 'Ruby' },
        { value: 'Swift', label: 'Swift' },
        { value: 'Kotlin', label: 'Kotlin' },
        { value: 'C#', label: 'C#' },
        { value: 'Go', label: 'Go' },
        { value: 'PHP', label: 'PHP' },
        { value: 'TypeScript', label: 'TypeScript' }
      ]
    }
  },
  computed: {
    filteredOptions () {
      return this.options.filter(option => option.label.toLowerCase().includes(this.searchTerm.toLowerCase()))
    }
  },
  methods: {
    handleInput () {
      this.showList = true
    },
    handleEnter () {
      if (this.filteredOptions.length > 0) {
        this.searchTerm = this.filteredOptions[0].label
        this.showList = false
      }
    },
    handleSelect (index) {
      this.searchTerm = this.filteredOptions[index].label
      this.showList = false
    }
  }
}
</script>

在代码中，我们先设置了一个 data 对象，其中包含了当前用户输入的搜索词、控制联想列表是否显示的布尔值 showList，以及数据源 options。为了实现过滤功能，我们使用了一个计算属性 filteredOptions 来根据搜索词过滤选项，并将其映射到一个新的数组。与此同时，我们定义了3个方法：

• handleInput：当输入框的值发生改变时触发的方法，该方法将 showList 设为 true。
• handleEnter：当用户按下 Enter 键时触发的方法。该方法检查当前是否有联想选项，如果有，则将第一个选项的值设置为搜索词，并将 showList 设为 false。
• handleSelect：当用户点击联想列表中的某个选项时触发的方法。该方法将所选选项的值设置为搜索词，并将 showList 设为 false。

最后，我们在 template 中定义了一个搜索框和一个联想列表，其中搜索框的值绑定到 searchTerm 上，当用户输入内容时，handleInput 方法会被调用，从而更新 showList 的状态。如果 showList 为真，则联想列表会显示。列表中的每个选项都绑定到 filteredOptions 数组中的元素，并使用 v-for 进行渲染。当用户点击某个选项时，handleSelectrrreee

Dans le code, nous avons d'abord configuré un objet data, qui contient les termes de recherche saisis par l'utilisateur actuel, la valeur booléenne showList qui contrôle si la liste d'associations s'affiche et Source de données options. Pour implémenter la fonctionnalité de filtrage, nous utilisons une propriété calculée filteredOptions pour filtrer les options en fonction du terme de recherche et les mapper à un nouveau tableau. En même temps, nous avons défini 3 méthodes :

• handleInput : Une méthode qui se déclenche lorsque la valeur de la zone de saisie change. Cette méthode showList. code> Défini sur true.
• handleEnter : Méthode déclenchée lorsque l'utilisateur appuie sur la touche Entrée. Cette méthode vérifie s'il existe actuellement des options d'association et, si c'est le cas, définit la valeur de la première option sur le terme de recherche et définit showList sur false.
• handleSelect : Méthode déclenchée lorsque l'utilisateur clique sur une option dans la liste des associations. Cette méthode définit la valeur de l'option sélectionnée sur le terme de recherche et définit showList sur false.

Enfin, nous avons défini un champ de recherche et une liste d'associations dans template, où la valeur du champ de recherche est liée à searchTerm, lorsque l'utilisateur saisit du contenu, la méthode handleInput est appelée, mettant ainsi à jour l'état de showList. Si showList est vrai, la liste de prédictions est affichée. Chaque option de la liste est liée à un élément du tableau filteredOptions et rendue à l'aide de v-for. Lorsque l'utilisateur clique sur une option, la méthode handleSelect est appelée, définissant la valeur de l'option sélectionnée et fermant la liste de prédictions. 🎜🎜Pour résumer, on voit qu'il n'est pas difficile d'utiliser Vue pour implémenter l'association de recherche. Il est facile de créer un composant de prédiction de recherche en configurant la source de données sous forme de tableau, en filtrant les options en fonction des termes de recherche et en utilisant des méthodes et des événements simples pour gérer les entrées et les sélections de l'utilisateur. 🎜

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!