基于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 相关文章推荐
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
PHP字符串处理的10个简单方法
2010/06/30 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP计数器的实现代码
2013/06/08 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jquery插件之easing使用
2010/08/19 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
python通过post提交数据的方法
2015/05/06 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
ProBikeKit德国:在线公路自行车专家
2018/06/03 全球购物
什么是TCP/IP
2014/07/27 面试题
幼儿园托班开学寄语
2014/01/18 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
伊索寓言教学反思
2014/05/01 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
Oracle笔记
2021/04/05 Oracle
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android
python中validators库的使用方法详解
2022/09/23 Python