基于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 相关文章推荐
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
深入理解angularjs过滤器
May 25 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
一起深入理解js中的事件对象
Feb 06 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
header跳转和include包含问题详解
2012/09/08 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php查询内存信息操作示例
2019/05/09 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python梯度下降法的简单示例
2018/08/31 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python3多线程知识点总结
2019/09/26 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
校园安全教育广播稿
2014/02/17 职场文书
产品设计开发计划书
2014/05/07 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
促销活动总结怎么写
2014/06/25 职场文书
小学国庆节活动总结
2015/03/23 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技