Vue搜索詳解

一、Vue搜索功能

Vue搜索功能是一個廣泛應用於各種Web應用程序的功能，其能夠在搜索框中實現快速搜索。

在Vue中使用搜索功能一般需要以下步驟：

創建一個搜索框組件
綁定搜索框中的value屬性
監聽搜索框value屬性變化並自動檢索
接收搜索結果並顯示

以下是Vue搜索功能的示例代碼：

  <template>
    <div>
      <input v-model="searchText" @input="search"/><!--綁定搜索框的value屬性並監聽input事件-->
      <ul>
        <li v-for="(item,index) in searchResult" :key="index">{{item}}</li><!--接收搜索結果並顯示-->
      </ul>
    </div>
  </template>

  <script>
    export default {
      data(){
        return {
          searchText:"",//搜索框中的值
          searchResult:[]//搜索結果
        }
      },
      methods:{
        async search(){
          let result = await api.search(this.searchText);//根據搜索框的值查詢結果
          this.searchResult = result;//接收結果並賦值
        }
      }
    }
  </script>

二、Vue搜索框模糊查詢資料庫

Vue搜索功能一般需要從資料庫中獲取數據並進行查詢才能實現。因此，模糊查詢資料庫是Vue搜索功能實現的重要環節。

下面是一個基於MySQL的模糊查詢的示例代碼：

  const query = `SELECT * FROM users WHERE name like '%${keyword}%'`;//查詢語句
  connection.query(query, function (error, results, fields) {
    if (error) throw error;
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify(results));//返回查詢結果
  });

三、Vue搜索框

Vue搜索框是Vue搜索功能中不可或缺的一部分，搜索框能夠幫助用戶輸入查詢關鍵詞，具體實現如下：

創建一個搜索框組件
綁定搜索框中的value屬性
監聽搜索框value屬性變化並自動檢索

以下是Vue搜索框的示例代碼：

  <template>
    <form @submit.prevent="search">
      <input type="text" v-model="keyword" placeholder="請輸入要搜索的內容"/><!--綁定搜索框的value屬性-->
      <button type="submit">搜索</button><!--監聽submit事件進行搜索-->
    </form>
  </template>

  <script>
    export default {
      data(){
        return {
          keyword:"",//搜索框中的值
        }
      },
      methods:{
        async search(){
          let result = await api.search(this.keyword);//根據搜索框的值查詢結果
          //TODO:接收結果並處理
        }
      }
    }
  </script>

四、Vue搜索框歷史記錄

Vue搜索框歷史記錄能夠幫助用戶輕鬆查找之前搜索的內容。實現方法如下：

在數據中添加一個記錄歷史搜索結果的屬性
在搜索結果展示的組件中添加一個歷史記錄查看按鈕
點擊歷史記錄查看按鈕彈出歷史搜索記錄彈窗
將歷史搜索記錄渲染出來

以下是Vue搜索框歷史記錄的示例代碼：

  <template>
    <div>
      <input v-model="searchText" @input="search"/><!--綁定搜索框的value屬性及input事件-->
      <button @click="showHistory">查看歷史記錄</button><!--歷史記錄查看按鈕-->
      <div>
        <ul>
          <li v-for="(item,index) in searchHistory" :key="index" @click="search(item)">{{item}}</li>
        </ul>
      </div>
      <ul>
        <li v-for="(item,index) in searchResult" :key="index">{{item}}</li>
      </ul>
    </div>
  </template>

  <script>
    export default {
      data(){
        return {
          searchText:"",//搜索框中的值
          searchResult:[],//搜索結果
          searchHistory:[]//歷史搜索記錄
        }
      },
      methods:{
        async search(keyword){
          if(keyword){
            this.searchText = keyword;//點擊歷史搜索記錄進行搜索時，賦值搜索框的值
          }
          let result = await api.search(this.searchText);//根據搜索框的值查詢結果
          this.searchResult = result;//接收結果並賦值
          if(this.searchText && !this.searchHistory.includes(this.searchText)){//如果搜索框中有值並且歷史記錄中不存在該值，則添加到歷史記錄中
            this.searchHistory.push(this.searchText);
          }
        },
        showHistory(){
          //展示歷史搜索記錄彈窗，根據項目需要自行實現
        }
      }
    }
  </script>

五、Vue搜索功能如何實現

Vue搜索功能可以通過調用介面查詢遠程資料庫以及添加歷史搜索記錄的方式來實現。

Vue搜索功能要注意以下幾個環節：

創建一個搜索框組件
綁定搜索框中的value屬性
監聽搜索框value屬性變化並自動檢索
模糊查詢資料庫
接收搜索結果並顯示
添加歷史搜索記錄
展示歷史搜索記錄

六、Vue模糊搜索功能

Vue模糊搜索功能是Vue搜索功能中的一個高級功能，其可以在搜索框中輸入一個詞或一個句子，然後從一定的範圍中找到與其最相近的結果，而不是完全匹配。

以下是Vue模糊搜索功能的示例代碼：

  export default {
    data(){
      return {
        keyword:"",
        searchResult:[]
      }
    },
    computed:{
      filteredResult(){
        return this.searchResult.filter(item=>item.includes(this.keyword));//篩選出包含keyword的結果
      }
    },
    methods:{
      async search(){
        let result = await api.search("");
        this.searchResult = result;
      }
    }
  }

七、Vue實現輸入框搜索功能

Vue實現輸入框搜索功能，除了需要監聽input事件並根據輸入的關鍵詞進行查詢外，還需要注意以下幾點：

防抖
節流
限制顯示條數

以下是Vue實現輸入框搜索功能的示例代碼：

  export default {
    data(){
      return {
        keyword:"",
        searchResult:[]
      }
    },
    methods:{
      async search(){
        let result = await api.search(this.keyword);
        this.searchResult = result;
      },
      debounceSearch:_.debounce(function(){
        this.search();
      },1000),
      throttleSearch:_.throttle(function(){
        this.search();
      },1000)
    }
  }

八、Vue搜索優化

Vue搜索優化是Vue搜索功能中的一個重要步驟，優化能夠實現更快捷、更準確的搜索結果。

以下是Vue搜索優化的示例代碼：

  export default {
    data(){
      return {
        keyword:"",
        searchResult:[]
      }
    },
    methods:{
      async search(){
        let result = await api.search(this.keyword);
        this.searchResult = result;
      }
    },
    watch:{
      "keyword":{
        immediate:true,//立即執行
        handler:function(){
          this.search();//實現自動搜索
        }
      }
    },
    computed:{
      searchedList(){
        return this.searchResult.slice(0,5);//限制顯示搜索結果數量
      }
    }
  }

九、Vue搜索樣式設置

Vue搜索樣式設置是Vue搜索功能中的一個重要環節，能夠美化搜索框，讓用戶更好的使用該功能。

以下是Vue搜索樣式設置的示例代碼：

  <template>
    <div class="search">
      <input class="search-input" type="text" placeholder="請輸入" v-model="keyword" @input="search" />
      <ul class="search-result">
        <li v-for="(item,index) in searchedList" :key="index">{{item}}</li>
      </ul>
    </div>
  </template>

  <script>
    export default {
      data(){
        return {
          keyword:"",
          searchResult:[]
        }
      },
      methods:{
        async search(){
          let result = await api.search(this.keyword);
          this.searchResult == result;
        }
      },
      watch:{
        "keyword":{
          immediate:true,
          handler:function(){
            this.search();
          }
        }
      },
      computed:{
        searchedList(){
          return this.searchResult.slice(0,5);
        }
      }
    }
  </script>

  <style>
    .search{
      position:relative;
      width:300px;
      margin:0 auto;
    }
    .search-input{
      width:100%;
      padding:10px;
      border:1px solid #ccc;
      font-size:14px;
      border-radius:5px;
    }
    .search-result{
      position:absolute;
      width:100%;
      top:50px;
      left:0;
      background:white;
      border:1px solid #ccc;
      border-top:none;
      border-radius:5px;
      box-shadow:0 0 5px #ccc;
      padding:0;
      margin:0;
      max-height:300px;
      overflow-y:auto;
    }
    .search-result li{
      list-style:none;
      padding:5px 10px;
      cursor:pointer;
    }
    .search-result li:hover{
      background:#f4f4f4;
    }
  </style>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/229012.html