前言

相信很多朋友遇到需要在網(wǎng)頁上增加一個搜索框的功能，本文簡單介紹兩種搜索框的實現(xiàn)。
搜索框的功能一般分為：
（1）即時檢索，即搜索框輸入內(nèi)容自動檢索，會隨著搜索內(nèi)容的不斷輸入，改變界面的顯示
（2）點擊搜索按鈕再開始搜索

以下分別介紹這兩種搜索框的簡單實現(xiàn)方式。

一、搜索框輸入內(nèi)容自動檢索

實現(xiàn)搜索框輸入內(nèi)容自動檢索功能，可以再分為兩種情況實現(xiàn)。

（1）檢索到輸入新的內(nèi)容后，就自動向后端發(fā)送查找請求（即時搜索）

這種設(shè)計，類似于現(xiàn)在的百度搜索，就是在搜索框輸入一段內(nèi)容后，會自動發(fā)起一次查找數(shù)據(jù)請求，界面自然就顯示新的內(nèi)容。
優(yōu)點：
這種設(shè)計會顯的很智能，不需要點搜索框即可檢索，搜索起來更加快速高效，使用起來更加跟手。
缺點：
1）需要搜索的內(nèi)容可能是一部分一部分輸入的，每次搜索框新增內(nèi)容就去搜索，往往不能得到真正想要的結(jié)果；
2）如果分段輸入搜索內(nèi)容的次數(shù)過多，會導(dǎo)致請求服務(wù)器響應(yīng)的次數(shù)過多，一個用戶在完成一次有效的檢索過程中，可能需要多次的請求服務(wù)器響應(yīng)，服務(wù)器性能、網(wǎng)絡(luò)資源等會被嚴重浪費，同時使用用戶過多可能導(dǎo)致服務(wù)器響應(yīng)較慢，嚴重會導(dǎo)致服務(wù)器崩潰。

需要注意： 即時檢索在使用的時候為了不浪費過多資源，往往需要限制發(fā)請求的時間或者需要搜索的內(nèi)容量，即每過一段時間或需要搜索的內(nèi)容量達到一定條件才發(fā)送請求。

以下內(nèi)容來自: input搜索框?qū)崟r檢索功能實現(xiàn)

參考代碼：

methods: {
  //使用_.debounce控制搜索的觸發(fā)頻率
  //準(zhǔn)備搜索
  search: _.debounce(
    function () {
      let that = this;
      //刪除已經(jīng)結(jié)束的請求
      _.remove(sources, function (n) {
        return n.source === null;
      });
      //取消還未結(jié)束的請求
      sources.forEach(function (item) {
        if (item !== null && item.source !== null && item.status === 1) {
          item.status = 0;
          item.source.cancel('取消上一個')
        }
      });

      //創(chuàng)建新的請求cancelToken,并設(shè)置狀態(tài)請求中
      var sc = {
        source: axios.CancelToken.source(),
        status: 1 //狀態(tài)1：請求中，0:取消中
      };
      //這個對象加入數(shù)組中
      sources.push(sc);
      //開始搜索數(shù)據(jù)，yourhttp替換成你自己的請求路徑
      axios.get('yourhttp', {
        cancelToken: sc.source.token
      }).then(function (res) {
        //請求成功
        sc.source = null; //置空請求canceltoken

        //TODO這里處理搜索結(jié)果
        console.log(res.data);
        that.result = res.data;

      }).catch(function (thrown) {
        //請求失敗
        sc.source = null; //置空請求canceltoken

        //下面的邏輯其實測試用
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          //handle error
        }

      });
    },
    500 //空閑時間間隔設(shè)置500ms
  )
}

（2）一次請求搜索到所有可能需要的數(shù)據(jù)，然后根據(jù)搜索框中的內(nèi)容進行數(shù)據(jù)過濾

如果：
1）搜索框的內(nèi)容相對固定，不像百度等網(wǎng)站需要對不同的搜索內(nèi)容進行兼容，數(shù)據(jù)庫整體數(shù)據(jù)量也不是很大
2）服務(wù)器性能有限，希望盡量減少請求服務(wù)器響應(yīng)次數(shù)

我們可以采用一次請求搜索到所有可能需要的數(shù)據(jù)，然后根據(jù)搜索框中的內(nèi)容進行數(shù)據(jù)過濾，顯示需要的數(shù)據(jù)
為了實現(xiàn)這個效果，我們可以使用Vue的Filter函數(shù)進行數(shù)據(jù)的過濾。過濾器整體分為局部過濾器和全局過濾器。

過濾器具體實現(xiàn)可以參考以下鏈接： Vue.js中過濾器（filter）的使用

我這里再介紹一種過濾器的使用，是我目前在使用的方式，這種方式和鏈接中的使用方式不太相同，相對簡單直接，看起來也很好懂，還能實現(xiàn)多頁面的切換功能。
話不多說上代碼！

result_Lists() {
  let start = (this.pageNo - 1) * this.pageSize; 	//定義顯示的第一條數(shù)據(jù)編號
  let end = start + this.pageSize;		//根據(jù)起始編號和每頁規(guī)定的顯示數(shù)量，定義顯示的最后條數(shù)據(jù)編號
  //返回經(jīng)過過濾的數(shù)據(jù)
  return this.result.filter(item =>
  (item.content && item.content.includes(this.searchContent)) 
  ).slice(start, end);
  //簡單介紹slice(start,end)：
  //方法可從已有數(shù)組中返回選定的元素，返回一個新數(shù)組，包含從start到end（不包含該元素）的數(shù)組元素。
}

這種實現(xiàn)方式呢，我個人認為更加簡單直接，很好懂，還能很好的配合多頁面的切換，根據(jù)頁面定義的每頁顯示的數(shù)據(jù)條數(shù)可以自動切換需要顯示的數(shù)據(jù)數(shù)量。

二、點擊搜索按鈕再開始搜索

點擊搜索按鈕再開始搜索應(yīng)該是最常見、最普通、最簡單的一種搜索方式。給搜索按鈕綁定事件，點擊搜索后向后端發(fā)請求，前端根據(jù)后端返回值在頁面顯示即可，這里不再贅述。

Vue前后端交互鏈接: 三、vue前后端交互（輕松入門vue）

總結(jié)

本文介紹了幾種搜索框常見的實現(xiàn)方式，特別推薦的是我在用的過濾器使用方式，實測很好用，很簡單。
希望對大家有用！文章來源地址http://www.zghlxwxcb.cn/news/detail-782768.html

到了這里，關(guān)于Vue前端：幾種搜索框功能實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！