基于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 相关文章推荐
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
JS 常用校验函数
2009/03/26 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
C#面试问题
2016/07/29 面试题
幼儿园大班毕业感言
2014/02/06 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Python实现8种常用抽样方法
2021/06/27 Python