基于Vue实现关键词实时搜索并突出关键词

最近在做移动实时搜索的功能，在做实时搜索和关键词高亮。想通过博客总结一下，希望能帮助到其他人~ ~ ~

如果你不喜欢读单词，我写了一个演示，已经上传到github了。你可以克隆它并直接读取https://github.com/IT0315/real-time-search.git代码

以下是演示操作的呈现

好吧，我们不说闲话了。只是代码。

实时搜索实时搜索通过触发输入事件和定时器来实现

input v-model=' keywords ' type=' text ' placeholder='请输入关键字' @input='handleQuery '将在每次输入框的值发生变化时执行handleQuery方法。

clear timer(){ if(this . timer){ clear time out(this . timer)}，handleQuery(event){ this . clear timer()console . log(event . timestamp)this . timer=setTimeout(()={ console . log(event . timestamp)//console . log(this . last time)//if(this . last time-event . timestamp===0){ this。$http.post('/api/vehicle ')。然后(res={ console.log(res.data.data)这个。change color(RES . data . data)})/} }，2000)}，handleQuery方法中有一个计时器，通过设置时间来控制搜索的执行。因为输入框中的值在输入时总是会改变，所以handleQuery将在每次改变时执行一次。我们通过clearTimer方法清除定时器。如果两个输入之间的时间间隔小于您设置的时间间隔(2s)，第一个计时器将被清除，第二个计时器将同时执行。这样就实现了对搜索的控制，而不是每次输入都请求数据。

注意：如果时间设置太短或者我们的服务器请求太慢，可能会在第一次查询返回之前进行第二次查询，返回的数据会是两次查询的结果，导致查询结果混乱。如果使用axios，则使用axios。CancelToken可以用来终止最后一个异步请求，从而防止旧的关键字查询覆盖新输入的关键字查询结果。

突出显示通过正则表达式替换关键字，并通过添加类突出显示关键字

change color(results list){ results list . map((Item，index)={ //console.log('item，Item) if (this。关键词这个。keywords . length 0){//匹配关键字正则let replaceeg=new regexp(这。关键字，G') //突出显示并替换v-html值让替换字符串=' span class=' search-text'' this。关键字'/span '结果列表[索引]。name=item . name . Replace(Replace reg，Replace string)})这。结果=[]这个。results=resultslist}查询结果后，执行changeColor方法传递查询到的数据，通过RegExp用huml标签替换关键字，在vue中用v-html绑定。最后，展示演示的完整代码

模板div class='Home '输入v-model=' KeyOns '类型=“文本”占位符='请输入关键词@ input=' handleQuery ' ul Li v-for='(item，index)导致' : key=' index ' v-html=' item。name/Li/ul/div/template script导出默认值{ name : ' Home }，data(){ return { keywords 3360 ' '，results 3360[]}，methods : { clear timer(){ if(this。计时器){清除超时(这。timer)} }，handleQuery(event){ this。清除计时器()控制台.$http.post('/api/vehicle ').然后(RES={控制台。日志数据。数据)这个。改变颜色数据。data)})//} }，2000) }，更改颜色(结果列表){结果列表。map((item，index)={ //console.log('item，item)if(this。关键词这个。关键词。长度0){//匹配关键字正则让RePlaceReg=new RegExp(这。KeyOnes，' g') //高亮替换v-html值让replace StrIng=' span class=' search-text ' ' this。关键字'/span '结果列表[索引].名称=项目。名字。替换(RePlaceReg，RePlaceString)} })这个。结果=[]这个。results=结果列表} } }/script！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件风格。search-text { color : red；}/样式最后，如果本文对你的学习或者工作有帮助的话，麻烦给个星星鼓励下啦~~~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。