Vue實現高效搜索功能：從輸入到展示

現在的網站和應用程序都離不開搜索功能，如何實現高效的搜索成為了一個必要的問題。在Vue框架下，我們可以輕鬆地實現從輸入到展示的快速搜索，以提供更好的用戶體驗。

一、實現搜索界面

為了實現搜索功能，我們需要先設計好搜索界面。一個簡單的搜索界面通常包括搜索輸入框、搜索按鈕和搜索結果展示區域。我們可以使用Vue組件來構建這個界面。

<template>
  <div>
    <input type="text" v-model="searchKeyword" placeholder="請輸入搜索關鍵字">
    <button @click="search">搜索</button>
    <ul>
      <li v-for="(item, index) in searchResults" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      searchResults: []
    }
  },
  methods: {
    search() {
      // 在這裡編寫搜索函數
    }
  }
}
</script>

在這個Vue組件中，我們定義了兩個數據屬性 searchKeyword 和 searchResults，它們分別代表用戶輸入的關鍵字和搜索結果。在組件的模板中，我們使用了 v-model 將用戶輸入的關鍵字與 searchKeyword 數據屬性雙向綁定，使用 v-for 展示搜索結果。

二、實現搜索功能

接下來，我們需要在搜索按鈕被點擊時執行搜索功能。搜索功能的具體實現需要根據具體的應用情況來進行，這裡我們以網路請求方式來實現搜索功能。例如，我們可以使用Vue框架下的Axios庫來進行網路請求來搜索需要的結果。

import axios from 'axios';

export default {
  data() {
    return {
      searchKeyword: '',
      searchResults: []
    }
  },
  methods: {
    search() {
      axios.get('/api/search', {
        params: {
          keyword: this.searchKeyword
        }
      })
      .then(response => {
        this.searchResults = response.data;
      })
      .catch(error => {
        // 處理錯誤
      });
    }
  }
}

在這個Vue組件中，我們引入了Axios庫，並在 search 方法中使用Axios進行HTTP請求。其中 params 選項用於傳遞搜索關鍵字，response.data 用於獲取搜索結果。

三、實現搜索實時響應

現在我們已經可以完成基本的搜索功能，但我們希望能夠實時響應用戶輸入的關鍵字，並隨時展示搜索結果。為了做到這一點，我們可以在用戶輸入時自動執行搜索功能，而無需等待用戶點擊搜索按鈕。

<template>
  <div>
    <input type="text" v-model="searchKeyword" placeholder="請輸入搜索關鍵字" @input="instantSearch">
    <ul>
      <li v-for="(item, index) in searchResults" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchKeyword: '',
      searchResults: []
    }
  },
  methods: {
    instantSearch() {
      axios.get('/api/search', {
        params: {
          keyword: this.searchKeyword
        }
      })
      .then(response => {
        this.searchResults = response.data;
      })
      .catch(error => {
        // 處理錯誤
      });
    }
  }
}
</script>

在這個Vue組件的模板中，我們使用了 @input 事件來監聽搜索輸入框的輸入事件，並在事件觸發時自動執行搜索功能。這樣，用戶輸入的關鍵字的每個字母都會及時地進行搜索，並展示實時更新的搜索結果。

四、實現搜索結果過濾

搜索結果可能會非常多，而有些結果可能並不是用戶需要的，因此我們需要提供一個過濾功能來幫助用戶找到他們真正需要的結果。在Vue框架下，我們可以使用計算屬性來實現搜索結果的過濾。

<template>
  <div>
    <input type="text" v-model="searchKeyword" placeholder="請輸入搜索關鍵字" @input="instantSearch">
    <ul>
      <li v-for="(item, index) in filteredResults" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchKeyword: '',
      searchResults: []
    }
  },
  methods: {
    instantSearch() {
      axios.get('/api/search', {
        params: {
          keyword: this.searchKeyword
        }
      })
      .then(response => {
        this.searchResults = response.data;
      })
      .catch(error => {
        // 處理錯誤
      });
    }
  },
  computed: {
    filteredResults() {
      return this.searchResults.filter(result => {
        return result.includes(this.searchKeyword);
      });
    }
  }
}
</script>

在這個Vue組件中，我們使用了計算屬性 filteredResults 進行搜索結果的過濾。在計算屬性中，我們通過 filter 方法來篩選包含搜索關鍵字的結果。

五、小結

通過這篇文章，我們學習了如何使用Vue框架實現從搜索輸入到展示的高效搜索功能。通過實現搜索界面、搜索功能、搜索實時響應和搜索結果過濾等步驟，我們可以為用戶提供更好的搜索體驗。