需求小能手——查找功能

前言

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

查找

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

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

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

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

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

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

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

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

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

总结

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

相关推荐
Running_C7 分钟前
常见web攻击类型
前端·http
jackyChan7 分钟前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
lichenyang4537 分钟前
快速搭建服务器,fetch请求从服务器获取数据
前端
豆苗学前端12 分钟前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
光影少年14 分钟前
react16-react19都更新哪些内容?
前端·react.js
奇舞精选20 分钟前
用 AI 提效的新方式:全面体验 Google Gemini CLI
前端·google·ai编程
我命由我1234543 分钟前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO43 分钟前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了1 小时前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
阳火锅1 小时前
在生产环境下,你真的有考虑到使用数组方法的健壮性吗?
前端·javascript·面试