Vue 中如何實現搜尋框及搜尋建議？-Vue.js-PHP中文網

Vue 中如何實現搜尋框及搜尋建議？

PHPz

發布： 2023-06-25 12:21:14

原創

2903 人瀏覽過

Vue 是一種流行的 JavaScript 框架，可用於快速建立現代 Web 應用程式。在許多 Web 應用程式中，搜尋框是必不可少的部分，允許使用者在大量資料中快速找到他們需要的內容。 Vue 提供了許多工具和技巧來實現搜尋框及其建議功能。

在本文中，我們將探討如何使用 Vue 和其他相關技術來實現搜尋框和搜尋建議。

搜尋框元件

首先，讓我們來建立一個搜尋框元件。該元件將允許用戶輸入搜尋查詢並將其與後端伺服器進行通訊以獲得相應的搜尋結果。

關鍵的 HTML 程式碼如下所示：

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

登入後複製

上面的程式碼定義了一個模板，其中 form 元素包含一個文字輸入框和一個提交按鈕。文字輸入框使用 v-model 指令將其值綁定到名為 query 的資料屬性。當使用者輸入查詢時，該屬性將自動更新。

當使用者點擊「搜尋」按鈕時，我們將觸發 submit 方法，該方法要麼向後端伺服器發出 API 請求，要麼使用本地資料進行搜尋。在本文中，我們假設我們使用 axios 庫向伺服器發出請求。

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

登入後複製

上面的程式碼定義了一個 Vue 元件，其中定義了 submit 方法。此方法從後端伺服器取得搜尋結果，並將其儲存到名為 results 的資料屬性中。

實作搜尋建議

現在，我們已經建立了一個基本的搜尋框元件，但如果使用者不確定要搜尋什麼，這仍然是很難使用的。在這種情況下，搜尋建議可以幫助用戶快速了解可用的搜尋選項。

我們可以藉助 Vue 的計算屬性來實作搜尋建議。計算屬性是一種特殊的資料屬性，它是根據其他資料屬性的值動態計算而來。在我們的例子中，我們將使用計算屬性來計算搜尋建議。

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

登入後複製

在上述程式碼中，我們新增了一個名為 suggestedQueries 的計算屬性。當 query 改變時，該屬性會自動重新計算，並從後端伺服器取得建議的搜尋查詢。

為了將這些建議渲染到使用者介面上，我們可以修改我們的HTML 模板，新增一個帶有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>

登入後複製

現在，在使用者輸入查詢時，我們會自動取得並顯示搜尋建議。當使用者點擊建議中的一項時，該項目將成為文字方塊中的值，並立即提交查詢。使用這種方式，我們可以幫助使用者快速找到他們需要的內容，並提供一個直覺、易於使用的介面。