資訊專欄INFORMATION COLUMN
摘要：高亮顯示通過實現(xiàn)對關鍵詞的替換，通過添加實現(xiàn)關鍵詞高亮顯示匹配關鍵字正則高亮替換值在查詢到結(jié)果后執(zhí)行方法將查詢出來的數(shù)據(jù)傳遞過來通過來將關鍵詞替換成標簽，同時用中的進行綁定。
最近在做移動real-time-search于實時搜索和關鍵詞高亮顯示的功能，通過博客的方式總結(jié)一下，同時希望能夠幫助到別人~~~
如果不喜歡看文字的朋友我寫了一個demo方便已經(jīng)上傳到了github上，可以clone下來直接看代碼?https://github.com/IT0315/rea...
下面是demo運行的效果圖
好了閑話不多說直接上代碼
實時搜索
實時搜索通過觸發(fā)input事件和定時器來實現(xiàn)
在每次輸入框的值變化的時候都會執(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方法中有一個定時器，通過設置時間來控制搜索的執(zhí)行，由于輸入時input的框中的值總是變化的，所以每次變化都會執(zhí)行一次handleQuery，我們通過clearTimer方法清除timer定時器，如果兩次輸入的間隔時間小于你設置的時間間隔（2s）的話第一個定期器將會被清除，同時執(zhí)行第二個定時器。這樣就實現(xiàn)了實施搜多的控制，而不是每次輸入的時候就去請求數(shù)據(jù)。
注意：如果時間設置過短或者說我們服務器請求較慢的話，可能第一次查詢還沒有返回便進行了第二次查詢，那么返回的數(shù)據(jù)將是兩次查詢的結(jié)果，造成查詢結(jié)果的混亂，如果使用的是axios可以利用axios.CancelToken來終止上一次的異步請求，防止舊關鍵字查詢覆蓋新輸入的關鍵字查詢結(jié)果。
高亮顯示
通過RegExp實現(xiàn)對關鍵詞的替換，通過添加class實現(xiàn)關鍵詞高亮顯示
changeColor (resultsList) {
resultsList.map((item, index) => {
// console.log("item", item)
if (this.keyWords && this.keyWords.length > 0) {
// 匹配關鍵字正則
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來將關鍵詞替換成huml標簽，同時用vue中的v-html進行綁定。最后將demo完整的代碼展示出來
最后，如果本文對你的學習或者工作有幫助的話，麻煩給個star鼓勵下啦~~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116919.html
摘要：高亮顯示通過實現(xiàn)對關鍵詞的替換，通過添加實現(xiàn)關鍵詞高亮顯示匹配關鍵字正則高亮替換值在查詢到結(jié)果后執(zhí)行方法將查詢出來的數(shù)據(jù)傳遞過來通過來將關鍵詞替換成標簽，同時用中的進行綁定。 最近在做移動real-time-search于實時搜索和關鍵詞高亮顯示的功能，通過博客的方式總結(jié)一下，同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經(jīng)上傳到了github上，可以cl...
摘要：在下沒有該問題。解決辦法部分這里隨意，需要用設定部分問題懶加載解決方法稍后補充參考文獻組件按需加載路由懶加載項目中使用將多個組件合并打包并實現(xiàn)按需加載 vue 仿今日頭條 為了增加移動端項目的經(jīng)驗，近一周通過 vue 仿寫今日頭條，以下就項目實現(xiàn)過程中遇到的問題以及解決方法給出總結(jié)，有什么不正確的地方，懇請大家批評指正^?_?^！，代碼倉庫地址為 github 一、實現(xiàn)功能 首頁展示...
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優(yōu)化、簡單教程 細心的同學可能發(fā)現(xiàn)了開頭出現(xiàn)了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。 同學們有沒有想過互聯(lián)網(wǎng)上用戶、網(wǎng)站 有多少呢？這里提供一個網(wǎng)站 internet live stats 里面實時的給出了...
閱讀 1116·2021-11-24 10:24
閱讀 2600·2021-11-22 13:54
閱讀 1008·2021-09-24 09:55
閱讀 3608·2019-08-30 15:54
閱讀 1325·2019-08-30 15:44
閱讀 1102·2019-08-30 14:23
閱讀 3208·2019-08-29 13:45
閱讀 1288·2019-08-29 11:19
