需求小能手——查找功能

前言

最近做了一个查找的需求,在输入框输入查找文本,在下面的树状结构中高亮出搜索的label,并附带着上一个、下一个功能,下面我们来看下具体的实现过程。

查找

查找功能的实现可以分为两步:

  1. 匹配,我们要先匹配到满足搜索文本的label。字符串的匹配有好几种方法,比如includes方法,正则表达式,这里我们采用正则表示式,正则能够满足更加复杂的匹配逻辑。
  2. 样式,匹配到的文本需要高亮,并且当前所在的label也要跟其他label区分开,这些都需要样式的支持。 思路已经梳理清楚,接下来我们来实现,简单写一个静态页面:

当我们输入文本的时候会出现匹配的个数与下标,点击上一个、下一个下标会跟着变动。

接下来我们就要把匹配、上一个、下一个交互加上,前面提到了匹配是要用到正则,这个很简单,我们就用test方法将搜索文本当成匹配字符。

匹配到之后就是高亮效果,高亮简单写一个样式就可以,但是如何在label替换出来呢?我们使用replace方法将label中匹配到的文本替换成有高亮样式的文本。所以label我们根据是否有搜索文本去展示,而且高亮样式也有两种,匹配到的样式跟选择匹配的样式,这些我们通过if else跟三目运算进行实现,具体的代码如下:

用户在输入文本的时候我们要实时获取filterData数据,所以我们需要用@input事件去过滤数据,用正则获取匹配的label,并且将匹配总数与下标赋值。

此时我们输入搜索文本,就能看到匹配效果:

橙色是当前所在的匹配文本,黄色为匹配出来的文本,最后我们完成上一个、下一个功能即可。这两个功能也很简单就是把下标进行对应加减,我们只需要进行首尾下标的判断,达到循环上/下一个的效果。

到此我们的查找功能就完成了,一般来说查找替换不分家,但是该查找功能如果想要附带替换就得跟后端商量写个接口了,不然前端替换后一刷新就回归原样了。

总结

查找功能就是利用字符replace方法结合正则做出来的,实例中是简单的list列表,如果换成树状列表就结合树状组件一些方法使用,查找方法本质是不变的。

相关推荐
G等你下课5 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在6 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵8 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius8 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91011 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala14 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy14 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101016 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日18 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子19 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试