基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动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实现关键词实时搜索高亮显示关键词的更多相关文章
- 基于vue的多引擎搜索及关键字提示
关键代码: <div class="header-search"> <form id="form" action="http://m ...
- 【lucene系列学习二】Lucene实现高亮显示关键词
首先,导入下图所示库 然后,import org.apache.lucene.search.highlight.*; 下面,我们新建一个实现高亮显示功能的函数 public static String ...
- 使用Spark进行搜狗日志分析实例——列出搜索不同关键词超过10个的用户及其搜索的关键词
package sogolog import org.apache.hadoop.io.{LongWritable, Text} import org.apache.hadoop.mapred.Tex ...
- solr6.3根据搜索关键词词频(关键词出现次数、关键词highlight)进行排序
http://localhost:8080/solr/test/select?fq=product_name:大有&indent=on&q=product_name:大有电钻 OR r ...
- 用Vue+axios写一个实时搜索
刚刚在学vue,试着写了一个实时搜索文件. 思路:1.input 通过v-model绑定.2.通过watch检测输入结果变化.3根据结果变化从api调用不同的数据. 代码如下: <!DOCTYP ...
- legend3---21、查问题或者查插件的时候请搜索对关键词
legend3---21.查问题或者查插件的时候请搜索对关键词 一.总结 一句话总结: 比如要查移动端的js图片裁剪插件,直接搜就“移动端的js图片裁剪插件” 千万记得问题和找资料都搜索对关键词(搜索 ...
- seo搜索优化教程11-seo搜索优化关键词策略
为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉科技强势推出seo搜索优化教程.此为seo教程第11课 关键词在seo搜索优化中有着重要的地位,本节主要讲解seo搜索优化中关键词优化的相 ...
- 苏宁基于Spark Streaming的实时日志分析系统实践 Spark Streaming 在数据平台日志解析功能的应用
https://mp.weixin.qq.com/s/KPTM02-ICt72_7ZdRZIHBA 苏宁基于Spark Streaming的实时日志分析系统实践 原创: AI+落地实践 AI前线 20 ...
- Everything文件名实时搜索||解决局域网文件共享问题
内容概要:Everything中文版下载地址及使用.用Everything轻松解决局域网文件共享问题.Everything语言设置问题 另:Everything只支持NTFS格式的磁盘(工作原理的缘故 ...
随机推荐
- CLR的GC工作模式介绍(Workstation和Server)
CLR的核心功能之一就是垃圾回收(garbage collection),关于GC的基本概念本文不在赘述.这里主要针对GC的两种工作模式展开讨论和研究. Workstaction模式介绍 该模式设计的 ...
- mysql中创建函数时报错信息
报错信息如下 ERROR 1418 (HY000): This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its ...
- TP5框架中实现多条件登录(自写代码,密码未md5()加密)
HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- php 23种设计模型 - 原型模式
原型模式(Prototype) 原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式是实现 ...
- kkFileView部署到windows服务出现问题解决
1.部署之后执行出现api-ms-win-crt-runtime-l1-1-0.dll丢失的办法 微软官网下载vc_redist.x64.exe vc_redist.x86.exe 64位的操作系统需 ...
- LGP3708题解
题面很直白,就不说了罢qaq 首先很明显,\(\sum_{i=1}^n x \bmod i = nx - \sum_{i=1}^n i\lfloor \frac x i \rfloor\) 这道题要是 ...
- ArcGIS热点分析
许多论文中一般会有热点分析图,ArcGIS中提供了热点分析的功能. 先看下描述:给定一组加权要素,使用 Getis-Ord Gi* 统计识别具有统计显著性的热点和冷点. 其实非常简单,今天博主就跟大家 ...
- Flask 之 WebSocket
http:是一个协议 规定:数据传输格式 -/r/n/r/n 一次的请求,一次的响应,断开了 短链接 无状态 服务器收到的请求,做出的响应给客户端 客户端主动向服务器发起请求 基于socket sen ...
- 4月18日 python学习总结 异常处理、网络编程
一. 异常 1.什么是异常 异常是错误发生的信号,程序一旦出错,如果程序中还没有相应的处理机制 那么该错误就会产生一个异常抛出来,程序的运行也随之终止 2.一个异常分为三部分: 1.异常的追踪信息 2 ...
- Golang中常用的代码优化点
Golang中常用的代码优化点 大家好,我是轩脉刃. 这篇想和大家聊一聊golang的常用代码写法.在golang中,如果大家不断在一线写代码,一定多多少少会有一些些代码的套路和经验.这些经验是代表你 ...