Vue如何實現輸入框新增搜索歷史記錄功能

這篇文章主要介紹了Vue如何實現輸入框新增搜索歷史記錄功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue實現搜索顯示歷史搜索記錄,采用插件-good-storage

安裝插件

     npm install good-storage -S

在本地新建cache.js文件,該文件是關于本地存儲的邏輯處理(緩存到本地的數據最大緩存15條，并且新的插入在第一位，首先得到當前的存儲數據情況，將關鍵字存到數組中，判斷如果數組中有相同的數據，則把重復的數據刪除，將新的關鍵字存入到前面)

cache.js 文件中的代碼如下

/*把搜索的結果保存下來*/ 
/*用export把方法暴露出來*/ 
/*定義存儲搜索的key _search_定義內部使用的key*/ 
const SEARCH_KEY='_search_' 
const SEARCH_MAX_LENGTH=15 
/*插入方法   arr存儲的數據 val傳入存儲的值 compare前后比較的函數 maxlen存入的最大值*/ 
function insertArray(arr,val,compare,maxlen){ 
  //findIndex()函數也是查找目標元素，找到就返回元素的位置，找不到就返回-1。 
  const index=arr.findIndex(compare) 
  if(index===0){ //數據為數組中的第一個數據 不做任何操作 
    return  
  } 
  if(index>0){ //數組中有這條數據并且不再第一個位置 
    arr.splice(index,1) //刪掉這個數 
  } 
  arr.unshift(val);//把這條數據存儲到數組中的第一個位置上 
  if(maxlen && arr.length>maxlen){ 
    //如果有條數限制并且數組的個數大于限制數 
    arr.pop() //方法將刪除 arrayObject 的最后一個元素，把數組長度減 1，并且返回它刪除的元素的值 
     
  } 
} 
//開源storage的庫，對localstorage和sessionstorage的封裝 
import storage from 'good-storage' 
export function saveSearch(query){ 
  let searches=storage.get(SEARCH_KEY,[]) 
  /*邏輯是最后一次搜索的結果放到搜索歷史的第一個*/ 
  insertArray(searches,query,(item)=>{    
    return item===query //這是傳入的一個比較函數 說明query在這個數組中 
  },SEARCH_MAX_LENGTH) 
  storage.set(SEARCH_KEY,searches) 
  return searches 
}

在對應的組件中應用的方式:

<template>
 <div class="search">
  <!-- 頂部搜索欄 -->
  <div class="header">
   <div class="head-title title-style">輸入關鍵字</div>
   <div class="head-input">
    <input
     type="text"
     ref="inputchange"
     v-model="valuetext"
     @keyup.enter="onSearch(true)"
     @keyup.tab="onSearch(true)"
     @focus="initPage"
     placeholder="請輸入關鍵字進行搜索"
    />
    <div type="text" @click="clear" class="input-btn title-style">清除</div>
   </div>

   <div class="history-panel" v-if="!isFocus">
    <div v-if="historyxs">搜索歷史</div>
    <div v-if="searches_list.length>0">
     <ul class="his_ulcon" v-if="historyxs">
      <li
       v-for="(item,index) in searches_list"
       :key="index"
       @click="historysearch(item)"
      >{{item}}</li>
     </ul>
    </div>
    <div class="history-tips" v-else>暫無搜索記錄！</div>
    <p v-if="historyxs" @click="clearhis">清空歷史記錄</p>
   </div>
  </div>
  <!-- ... 此處省略無關代碼 -->

  <!-- 底部按鈕 -->
  <div class="footer title-style">
   <van-row>
    <van-col span="12">
     <div class="left" @click="resetData">重置所選條件</div>
    </van-col>
    <van-col span="12">
     <div class="right" @click="onSearch(true)">立即搜索</div>
    </van-col>
   </van-row>
  </div>
 </div>
</template>

<script type="text/Babel">
import { saveSearch } from "../../utils/cache"; //引用本地存儲js
import storage from "good-storage"; //引入good-storage包
export default {
 data() {
  return {
   isFocus: true,
   searches_list: [], //歷史搜索記錄列表
   historyxs: false,
   valuetext: ""
  };
 },
 mounted() {},
 methods: {
  //輸入框獲取焦點
  initPage() {
   this.isFocus = false;
   this.$emit("initSearchPage");
   //為避免重復先清空再添加
   this.searches_list = [];
   let searches = storage.get("_search_");
   this.searches_list = searches ? searches : [];
   if (this.searches_list.length > 0) {
    this.historyxs = true;
   } else {
    this.historyxs = false;
   }
  },
  //清空歷史記錄
  clearhis() {
   storage.remove("_search_");
   this.searches_list = [];
   this.historyxs = false;
  },
  //點擊歷史搜索把搜索的記錄添加到good-storage中
  historysearch(item) {
   saveSearch(item);
   this.valuetext = item;
   this.historyxs = false;
  },
  resetData() {
   // ...
   //  此次省略重置數據的邏輯代碼
  },
  onSearch(isFirst) {
   this.isFocus = true;
   if (this.valuetext != "") {
    //搜索框不為空
    saveSearch(this.valuetext); // 本地存儲搜索的內容
    let params = {
     majorInfo: this.valuetext //流程類型或者流程名稱
    };
    this.$emit("handleSearch", params);
    this.isFocus = true;
   }
   // ...
   // 此次省略調用搜索接口的代碼
  },
  clear() {
   this.valuetext = "";
  }
  // ... 無關代碼已省略
 }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.search {
 overflow-y: scroll;
 overflow-x: hidden;
 padding: 0.14rem 0.12rem 0.53rem;
 .header {
  border-bottom: 0.01rem solid #f2f2f2;
  .head-title {
   padding-bottom: 0.05rem;
   color: #666666;
  }
  .head-input {
   width: 100%;
   padding-bottom: 0.1rem;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

   > input {
    height: 0.29rem;
    width: 2.84rem;
    border-radius: 0.03rem;
    background-color: #f6f6f6;
    font-family: PingFang-SC-Regular;
    font-weight: Regular;
    color: #999999;
    font-size: 0.12rem;
    padding-left: 0.12rem;
   }
   .input-btn {
    color: #029ffb;
    width: 0.5rem;
    height: 0.29rem;
    line-height: 0.29rem;
    text-align: center;
   }
  }
  .history-panel {
   width: 100%;
   overflow: hidden;
   padding: 0.1rem 0;
   border-top: 1px solid #f2f2f2;
   .his_ulcon {
    margin-top: 0.1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    > li {
     border: 1px solid #f2f2f2;
     border-radius: 0.03rem;
     display: inline-block;
     font-size: 0.12rem;
     padding: 0 0.15rem;
     width: fit-content; //div寬度自適應文字內容
     width: -webkit-fit-content;
     width: -moz-fit-content;
     height: 0.29rem;
     line-height: 0.29rem;
     text-align: center;
     margin-right: 0.1rem;
     background-color: #f2f2f2;
     margin-bottom: 0.1rem;
    }
   }
   div {
    box-sizing: border-box;
    font-size: 0.13rem;
    color: #666666;
    font-weight: Medium;
    font-family: PingFang-SC-Medium;
   }
   > p {
    text-align: center;
    margin-top: 0.1rem;
    font-size: 0.13rem;
   }
  }
  .history-tips {
   text-align: center;
  }
 }
 .title-style {
  font-size: 0.13rem;
  font-weight: Medium;
  font-family: PingFang-SC-Medium;
 }
}
</style>

溫馨提示:引入cache.js時你的文件路徑要按照你自己的路徑來 一 一對應

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue如何實現輸入框新增搜索歷史記錄功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!