基于Vue实现关键词实时搜索高亮显示关键词


Posted in Javascript onJuly 21, 2018

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

如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git

下面是demo运行的效果图

基于Vue实现关键词实时搜索高亮显示关键词

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

实时搜索

实时搜索通过触发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鼓励下啦~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
纯JS代码实现气泡效果
May 04 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
浅谈vue父子组件怎么传值
Jul 21 #Javascript
通过webpack引入第三方库的方法
Jul 20 #Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 #Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jquery实现的树形目录实例
2015/06/26 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
js实现文字滚动效果
2016/03/03 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python虚拟环境项目实例
2017/11/20 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python字符串string的内置方法实例详解
2018/05/14 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python机器学习之神经网络实现
2018/10/13 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
饭店工作计划书
2014/01/10 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
解析MySQL索引的作用
2022/03/03 MySQL