Bagaimana untuk melaksanakan perkaitan carian dalam Vue?

Dengan perkembangan teknologi rangkaian yang berterusan, semakin banyak laman web dan aplikasi menyediakan fungsi carian untuk memudahkan pengguna mencari apa yang mereka perlukan dengan cepat. Perkaitan carian, juga dikenali sebagai "auto-isi", ialah fungsi yang membolehkan pengguna mencari kandungan yang mereka mahu cari dengan lebih pantas. Dalam Vue, fungsi perkaitan carian boleh dilaksanakan dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk mencipta komponen persatuan carian mudah.

Pertama, anda memerlukan sumber data yang mengandungi pilihan untuk dicari untuk menjana senarai persatuan. Di sini kita boleh menggunakan tatasusunan mudah dengan beberapa data palsu:

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' }
]

Kini kita perlu mencipta komponen Vue yang memaparkan kotak carian dan senarai ramalan. Dalam komponen ini, kami akan mencipta objek data untuk menyimpan semua keadaan dan sifat yang berkaitan, yang mengandungi istilah carian semasa dan senarai perkaitan yang akan dipaparkan. Kami juga akan memperkenalkan sifat pengiraan Vue filteredOptions untuk menapis tatasusunan options berdasarkan istilah carian semasa. Akhir sekali, kita perlu menambah beberapa kaedah untuk mengendalikan input pengguna dan memilih item persatuan. 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

Dalam kod, kami mula-mula menyediakan objek data, yang mengandungi istilah carian yang dimasukkan oleh pengguna semasa, nilai Boolean showList yang mengawal sama ada senarai persatuan dipaparkan dan Sumber data pilihan. Untuk melaksanakan fungsi penapisan, kami menggunakan harta terkira filteredOptions untuk menapis pilihan berdasarkan istilah carian dan memetakannya ke tatasusunan baharu. Pada masa yang sama, kami telah mentakrifkan 3 kaedah:

• handleInput: Kaedah yang dicetuskan apabila nilai kotak input berubah Kaedah ini akan showListkod> Tetapkan kepada <code>true.
• handleEnter: Kaedah dicetuskan apabila pengguna menekan kekunci Enter. Kaedah ini menyemak sama ada pada masa ini terdapat sebarang pilihan perkaitan, dan jika ya, tetapkan nilai pilihan pertama kepada istilah carian dan tetapkan showList kepada false.
• handleSelect: Kaedah dicetuskan apabila pengguna mengklik pilihan dalam senarai perkaitan. Kaedah ini menetapkan nilai pilihan yang dipilih kepada istilah carian dan menetapkan showList kepada false.

Akhir sekali, kami menentukan kotak carian dan senarai perkaitan dalam template, di mana nilai kotak carian terikat pada searchTerm, Apabila pengguna memasukkan kandungan, kaedah handleInput dipanggil, dengan itu mengemas kini keadaan showList. Jika showList adalah benar, senarai ramalan ditunjukkan. Setiap pilihan dalam senarai terikat pada elemen dalam tatasusunan filteredOptions dan diberikan menggunakan v-for. Apabila pengguna mengklik pada pilihan, kaedah handleSelect dipanggil, menetapkan nilai pilihan yang dipilih dan menutup senarai ramalan. 🎜🎜Ringkasnya, kita dapat melihat bahawa tidak sukar untuk menggunakan Vue untuk melaksanakan perkaitan carian. Mudah untuk mencipta komponen ramalan carian dengan menetapkan sumber data kepada tatasusunan, menapis pilihan berdasarkan istilah carian dan menggunakan kaedah dan peristiwa mudah untuk mengendalikan input dan pilihan pengguna. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan perkaitan carian dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!