Bagaimana untuk melaksanakan kotak carian dan cadangan carian dalam Vue?

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden dengan cepat. Dalam kebanyakan aplikasi web, kotak carian adalah bahagian penting, membolehkan pengguna mencari dengan cepat perkara yang mereka perlukan dalam jumlah data yang besar. Vue menyediakan banyak alat dan teknik untuk melaksanakan kotak carian dan fungsi cadangannya.

Dalam artikel ini, kami akan meneroka cara melaksanakan kotak carian dan cadangan carian menggunakan Vue dan teknologi lain yang berkaitan.

Komponen Kotak Carian

Mula-mula, mari buat komponen kotak carian. Komponen ini akan membolehkan pengguna memasukkan pertanyaan carian dan berkomunikasi dengan pelayan bahagian belakang untuk mendapatkan hasil carian yang sepadan.

Kod HTML utama adalah seperti berikut:

<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>

Kod di atas mentakrifkan templat di mana elemen borang mengandungi kotak input teks dan butang hantar. Kotak input teks menggunakan arahan v-model untuk mengikat nilainya pada atribut data bernama pertanyaan. Sifat ini akan dikemas kini secara automatik apabila pengguna memasukkan pertanyaan.

Apabila pengguna mengklik butang Carian, kami akan mencetuskan kaedah serah, yang sama ada akan membuat permintaan API ke pelayan bahagian belakang atau mencari menggunakan data tempatan. Dalam artikel ini, kami menganggap bahawa kami menggunakan perpustakaan axios untuk membuat permintaan kepada pelayan.

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)
      }
    }
  }
}

Kod di atas mentakrifkan komponen Vue, yang mentakrifkan kaedah serahan. Kaedah ini mendapat hasil carian daripada pelayan bahagian belakang dan menyimpannya dalam sifat data bernama hasil.

Melaksanakan cadangan carian

Sekarang kami telah mencipta komponen kotak carian asas, ini masih sukar untuk digunakan jika pengguna tidak pasti apa yang perlu dicari. Dalam kes ini, cadangan carian boleh membantu pengguna memahami dengan cepat pilihan carian yang tersedia.

Kami boleh menggunakan sifat pengiraan Vue untuk melaksanakan cadangan carian. Sifat yang dikira ialah jenis sifat data khas yang dikira secara dinamik berdasarkan nilai sifat data lain. Dalam contoh kami, kami akan menggunakan sifat yang dikira untuk mengira cadangan carian.

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)
      }
    }
  }
}

Dalam kod di atas, kami telah menambahkan sifat terkira baharu yang dipanggil suggestedQueries. Apabila pertanyaan berubah, sifat ini dikira semula secara automatik dan pertanyaan carian yang dicadangkan diperoleh daripada pelayan bahagian belakang.

Untuk memberikan cadangan ini pada antara muka pengguna, kami boleh mengubah suai templat HTML kami dan menambah komponen baharu dengan arahan 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>

Sekarang, apabila pengguna memasukkan pertanyaan, kami akan mengambil dan memaparkan cadangan carian secara automatik . Apabila pengguna mengklik item dalam cadangan, item itu menjadi nilai dalam kotak teks dan pertanyaan segera diserahkan. Menggunakan pendekatan ini, kami membantu pengguna mencari perkara yang mereka perlukan dengan cepat dan menyediakan antara muka yang intuitif dan mudah digunakan.

Kesimpulan

Vue menyediakan banyak alat dan helah untuk melaksanakan kotak carian dan fungsi cadangannya. Menggunakannya, tidak lagi sukar untuk melaksanakan fungsi carian yang cekap dan menyenangkan. Dalam amalan, anda mungkin menghadapi cabaran seperti cara mengendalikan set data yang besar atau cara berkomunikasi dengan pelayan bahagian belakang. Walau bagaimanapun, rangka kerja Vue menyediakan banyak alatan dan perpustakaan untuk menyelesaikan masalah ini, membantu anda membina aplikasi dengan mudah dengan pengalaman carian yang sangat baik.

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