Vue 中如何實現搜尋聯想？

隨著網路技術的不斷發展，越來越多的網站和應用程式都提供搜尋功能，以方便用戶快速找到所需內容。而搜尋聯想又稱為“自動填充”，則是為了讓使用者更快找到想要搜尋的內容而出現的功能。在 Vue 中，可以很方便地實現搜尋聯想功能。本文將介紹如何使用 Vue 來建立一個簡單的搜尋聯想元件。

首先，需要一個含有待搜尋選項的資料來源，以便產生聯想清單。在這裡，我們可以使用一個簡單的數組，其中包含一些假資料：

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

現在，我們需要建立一個 Vue 元件，用於顯示搜尋框和聯想清單。在這個元件中，我們將建立一個 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 進行渲染。當使用者點擊某個選項時，handleSelect 方法會被調用，從而設定所選選項的值並關閉聯想清單。

綜上所述，我們可以看到，使用 Vue 來實現搜尋聯想並不困難。將資料來源設定為數組，根據搜尋字詞過濾選項，並使用簡單的方法和事件來處理使用者輸入和選中，可以輕鬆建立一個搜尋聯想元件。

以上是Vue 中如何實現搜尋聯想？的詳細內容。更多資訊請關注PHP中文網其他相關文章！