基于Vue實(shí)現(xiàn)關(guān)鍵詞實(shí)時(shí)搜索高亮顯示關(guān)鍵詞

NusterCache 發(fā)布于2019-08-22 18:50 / 789人閱讀

摘要：高亮顯示通過實(shí)現(xiàn)對關(guān)鍵詞的替換，通過添加實(shí)現(xiàn)關(guān)鍵詞高亮顯示匹配關(guān)鍵字正則高亮替換值在查詢到結(jié)果后執(zhí)行方法將查詢出來的數(shù)據(jù)傳遞過來通過來將關(guān)鍵詞替換成標(biāo)簽，同時(shí)用中的進(jìn)行綁定。

最近在做移動(dòng)real-time-search于實(shí)時(shí)搜索和關(guān)鍵詞高亮顯示的功能，通過博客的方式總結(jié)一下，同時(shí)希望能夠幫助到別人~~~

如果不喜歡看文字的朋友我寫了一個(gè)demo方便已經(jīng)上傳到了github上，可以clone下來直接看代碼?https://github.com/IT0315/rea...
下面是demo運(yùn)行的效果圖

好了閑話不多說直接上代碼

實(shí)時(shí)搜索

實(shí)時(shí)搜索通過觸發(fā)input事件和定時(shí)器來實(shí)現(xiàn)

在每次輸入框的值變化的時(shí)候都會(huì)執(zhí)行handleQuery方法

    clearTimer () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    handleQuery (event) {
      this.clearTimer()
      console.log(event.timeStamp)
      this.timer = setTimeout(() => {
        console.log(event.timeStamp)
        // console.log(this.lastTime)
        // if (this.lastTime - event.timeStamp === 0) {
        this.$http.post("/api/vehicle").then(res => {
          console.log(res.data.data)
          this.changeColor(res.data.data)
        })
        // }
      }, 2000)
    },

在handleQuery方法中有一個(gè)定時(shí)器，通過設(shè)置時(shí)間來控制搜索的執(zhí)行，由于輸入時(shí)input的框中的值總是變化的，所以每次變化都會(huì)執(zhí)行一次handleQuery，我們通過clearTimer方法清除timer定時(shí)器，如果兩次輸入的間隔時(shí)間小于你設(shè)置的時(shí)間間隔（2s）的話第一個(gè)定期器將會(huì)被清除，同時(shí)執(zhí)行第二個(gè)定時(shí)器。這樣就實(shí)現(xiàn)了實(shí)施搜多的控制，而不是每次輸入的時(shí)候就去請求數(shù)據(jù)。

注意：如果時(shí)間設(shè)置過短或者說我們服務(wù)器請求較慢的話，可能第一次查詢還沒有返回便進(jìn)行了第二次查詢，那么返回的數(shù)據(jù)將是兩次查詢的結(jié)果，造成查詢結(jié)果的混亂，如果使用的是axios可以利用axios.CancelToken來終止上一次的異步請求，防止舊關(guān)鍵字查詢覆蓋新輸入的關(guān)鍵字查詢結(jié)果。

高亮顯示

通過RegExp實(shí)現(xiàn)對關(guān)鍵詞的替換，通過添加class實(shí)現(xiàn)關(guān)鍵詞高亮顯示

 changeColor (resultsList) {
      resultsList.map((item, index) => {
        // console.log("item", item)
        if (this.keyWords && this.keyWords.length > 0) {
          // 匹配關(guān)鍵字正則
          let replaceReg = new RegExp(this.keyWords, "g")
          // 高亮替換v-html值
          let replaceString =
            "" + this.keyWords + ""
          resultsList[index].name = item.name.replace(
            replaceReg,
            replaceString
          )
        }
      })
      this.results = []
      this.results = resultsList
}

在查詢到結(jié)果后執(zhí)行changeColor方法將查詢出來的數(shù)據(jù)傳遞過來通過RegExp來將關(guān)鍵詞替換成huml標(biāo)簽，同時(shí)用vue中的v-html進(jìn)行綁定。最后將demo完整的代碼展示出來

最后，如果本文對你的學(xué)習(xí)或者工作有幫助的話，麻煩給個(gè)star鼓勵(lì)下啦~~~