最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~

如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/rea...
下面是demo运行的效果图

好了闲话不多说直接上代码

实时搜索

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

<input v-model="keyWords" type="text" placeholder="请输入关键词" @input="handleQuery">

在每次输入框的值变化的时候都会执行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方法中有一个定时器,通过设置时间来控制搜索的执行,由于输入时input的框中的值总是变化的,所以每次变化都会执行一次handleQuery,我们通过clearTimer方法清除timer定时器,如果两次输入的间隔时间小于你设置的时间间隔(2s)的话第一个定期器将会被清除,同时执行第二个定时器。这样就实现了实施搜多的控制,而不是每次输入的时候就去请求数据。

注意:如果时间设置过短或者说我们服务器请求较慢的话,可能第一次查询还没有返回便进行了第二次查询,那么返回的数据将是两次查询的结果,造成查询结果的混乱,如果使用的是axios可以利用axios.CancelToken来终止上一次的异步请求,防止旧关键字查询覆盖新输入的关键字查询结果。

高亮显示

通过RegExp实现对关键词的替换,通过添加class实现关键词高亮显示

 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 =
'<span class="search-text">' + this.keyWords + '</span>'
resultsList[index].name = item.name.replace(
replaceReg,
replaceString
)
}
})
this.results = []
this.results = resultsList
}

在查询到结果后执行changeColor方法将查询出来的数据传递过来通过RegExp来将关键词替换成huml标签,同时用vue中的v-html进行绑定。最后将demo完整的代码展示出来

<template>
<div class="Home">
<input v-model="keyWords" type="text" placeholder="请输入关键词" @input="handleQuery">
<ul>
<li v-for="(item,index) in results" :key='index' v-html='item.name'></li>
</ul>
</div>
</template> <script>
export default {
name: 'Home',
data () {
return {
keyWords: '',
results: []
}
},
methods: {
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)
}, 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 =
'<span class="search-text">' + this.keyWords + '</span>'
resultsList[index].name = item.name.replace(
replaceReg,
replaceString
)
}
})
this.results = []
this.results = resultsList
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.search-text{
color: red;
}
</style>

最后,如果本文对你的学习或者工作有帮助的话,麻烦给个star鼓励下啦~~~

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hbh21ic0jaa

基于Vue实现关键词实时搜索高亮显示关键词的更多相关文章

  1. 基于vue的多引擎搜索及关键字提示

    关键代码: <div class="header-search"> <form id="form" action="http://m ...

  2. 【lucene系列学习二】Lucene实现高亮显示关键词

    首先,导入下图所示库 然后,import org.apache.lucene.search.highlight.*; 下面,我们新建一个实现高亮显示功能的函数 public static String ...

  3. 使用Spark进行搜狗日志分析实例——列出搜索不同关键词超过10个的用户及其搜索的关键词

    package sogolog import org.apache.hadoop.io.{LongWritable, Text} import org.apache.hadoop.mapred.Tex ...

  4. solr6.3根据搜索关键词词频(关键词出现次数、关键词highlight)进行排序

    http://localhost:8080/solr/test/select?fq=product_name:大有&indent=on&q=product_name:大有电钻 OR r ...

  5. 用Vue+axios写一个实时搜索

    刚刚在学vue,试着写了一个实时搜索文件. 思路:1.input 通过v-model绑定.2.通过watch检测输入结果变化.3根据结果变化从api调用不同的数据. 代码如下: <!DOCTYP ...

  6. legend3---21、查问题或者查插件的时候请搜索对关键词

    legend3---21.查问题或者查插件的时候请搜索对关键词 一.总结 一句话总结: 比如要查移动端的js图片裁剪插件,直接搜就“移动端的js图片裁剪插件” 千万记得问题和找资料都搜索对关键词(搜索 ...

  7. seo搜索优化教程11-seo搜索优化关键词策略

    为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉科技强势推出seo搜索优化教程.此为seo教程第11课 关键词在seo搜索优化中有着重要的地位,本节主要讲解seo搜索优化中关键词优化的相 ...

  8. 苏宁基于Spark Streaming的实时日志分析系统实践 Spark Streaming 在数据平台日志解析功能的应用

    https://mp.weixin.qq.com/s/KPTM02-ICt72_7ZdRZIHBA 苏宁基于Spark Streaming的实时日志分析系统实践 原创: AI+落地实践 AI前线 20 ...

  9. Everything文件名实时搜索||解决局域网文件共享问题

    内容概要:Everything中文版下载地址及使用.用Everything轻松解决局域网文件共享问题.Everything语言设置问题 另:Everything只支持NTFS格式的磁盘(工作原理的缘故 ...

随机推荐

  1. CLR的GC工作模式介绍(Workstation和Server)

    CLR的核心功能之一就是垃圾回收(garbage collection),关于GC的基本概念本文不在赘述.这里主要针对GC的两种工作模式展开讨论和研究. Workstaction模式介绍 该模式设计的 ...

  2. mysql中创建函数时报错信息

    报错信息如下 ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its ...

  3. TP5框架中实现多条件登录(自写代码,密码未md5()加密)

    HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. php 23种设计模型 - 原型模式

    原型模式(Prototype) 原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式是实现 ...

  5. kkFileView部署到windows服务出现问题解决

    1.部署之后执行出现api-ms-win-crt-runtime-l1-1-0.dll丢失的办法 微软官网下载vc_redist.x64.exe vc_redist.x86.exe 64位的操作系统需 ...

  6. LGP3708题解

    题面很直白,就不说了罢qaq 首先很明显,\(\sum_{i=1}^n x \bmod i = nx - \sum_{i=1}^n i\lfloor \frac x i \rfloor\) 这道题要是 ...

  7. ArcGIS热点分析

    许多论文中一般会有热点分析图,ArcGIS中提供了热点分析的功能. 先看下描述:给定一组加权要素,使用 Getis-Ord Gi* 统计识别具有统计显著性的热点和冷点. 其实非常简单,今天博主就跟大家 ...

  8. Flask 之 WebSocket

    http:是一个协议 规定:数据传输格式 -/r/n/r/n 一次的请求,一次的响应,断开了 短链接 无状态 服务器收到的请求,做出的响应给客户端 客户端主动向服务器发起请求 基于socket sen ...

  9. 4月18日 python学习总结 异常处理、网络编程

    一. 异常 1.什么是异常 异常是错误发生的信号,程序一旦出错,如果程序中还没有相应的处理机制 那么该错误就会产生一个异常抛出来,程序的运行也随之终止 2.一个异常分为三部分: 1.异常的追踪信息 2 ...

  10. Golang中常用的代码优化点

    Golang中常用的代码优化点 大家好,我是轩脉刃. 这篇想和大家聊一聊golang的常用代码写法.在golang中,如果大家不断在一线写代码,一定多多少少会有一些些代码的套路和经验.这些经验是代表你 ...