最近在做移动实时搜索，实时搜索和关键词高亮功能。我会通过写博客总结一下，希望对大家有所帮助~~~对于不喜欢看文字的朋友，为了方便，我写了一个demo，上传到github上了。可以clone一下，直接看代码https://github.com/IT0315/rea...下面是demo运行效果图。闲话不多说，直接上代码实时搜索实时搜索是通过触发输入事件和定时器实现的在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方法中有一个定时器，通过设置时间来控制查找的执行。由于输入框中的值在输入过程中总是变化的，所以每次变化时都会执行handleQuery。我们通过clearTimer方法清除timer定时器。如果两次输入的时间间隔小于你设置的时间间隔（2s），第一个定时器会被清零，同时执行第二个定时器，从而实现对搜索执行的控制，而不是每个输入。请求数据的时间。注意：如果时间设置的太短或者我们的服务器请求速度慢，可能会在第一次查询返回之前进行第二次查询，那么返回的数据将是两次查询的结果，造成查询结果的混乱。如果使用的是axios，可以使用axios.CancelToken终止上一次异步请求，防止旧的关键字查询覆盖新输入的关键字查询结果。Highlighting用RegExp替换关键字，通过添加classchangeColor(resultsList){resultsList.map((item,index)=>{//console.log('item',item)if(this.keyWords&&this.keyWords.length>0){//正则匹配关键字letreplaceReg=newRegExp(this.keyWords,'g')//突出显示并替换v-html值letreplaceString=''+this.keyWords+''resultsList[index].name=item.name.replace(replaceReg,replaceString)}})this.results=[]this.results=resultsList}查询结果后执行changeColor方法将查询到的数据传过去，使用RegExp将关键字替换为huml标签，同时使用vue中的v-html进行绑定。最后将demo完整的代码展示出来
最后，如果本文对您的学习或工作有帮助，请给个star鼓励一下~~~
