基於Vue實現關鍵詞實時搜尋高亮顯示關鍵詞

2021-09-13 12:57:11 字數 906 閱讀 4820

下面是demo執行的效果圖

好了閒話不多說直接上**

實時搜尋
實時搜尋通過觸發input事件和定時器來實現

在每次輸入框的值變化的時候都會執行handlequery方法

cleartimer () 

},handlequery (event) )

// }

}, 2000)

},

在handlequery方法中有乙個定時器,通過設定時間來控制搜尋的執行,由於輸入時input的框中的值總是變化的,所以每次變化都會執行一次handlequery,我們通過cleartimer方法清除timer定時器,如果兩次輸入的間隔時間小於你設定的時間間隔(2s)的話第乙個定期器將會被清除,同時執行第二個定時器。這樣就實現了實施搜多的控制,而不是每次輸入的時候就去請求資料。

注意:如果時間設定過短或者說我們伺服器請求較慢的話,可能第一次查詢還沒有返回便進行了第二次查詢,那麼返回的資料將是兩次查詢的結果,造成查詢結果的混亂,如果使用的是axios可以利用axios.canceltoken來終止上一次的非同步請求,防止舊關鍵字查詢覆蓋新輸入的關鍵字查詢結果。

高亮顯示
changecolor (resultslist) 

})this.results =

this.results = resultslist

}

最後,如果本文對你的學習或者工作有幫助的話,麻煩給個star鼓勵下啦~~~

nlp 關鍵詞搜尋

可以嘗試修改 除錯 公升級的部分是 文字預處理步驟 你可以使用很多不同的方法來使得文字資料變得更加清潔 更好的回歸模型 根據之前的課講的ensemble方法,把分類器提公升到極致 版本1.0 日期 10.10.2019 import numpy as np import pandas as pd f...

pycharm實現基於mysql關鍵詞檢索問題

def adproquery content request.form.get ad prosearch 需要查詢的內容 if content is none content pros cy regist.query.filter or cy regist.user name.like conten...

Redis 實現搜尋關鍵詞自動補全

一 字典型自動補全 redis 的有序集合有乙個特性 score 相同時,是按照字典順序排序的。127.0.0.1 6379 zrange autoc 0 1 1 b 2 ba 3 bar 4 bar 5 f 6 fo 7 foo 8 foo 9 foob 10 fooba 11 foobar 12...