需求小能手——查找功能

前言

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

查找

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

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

需求小能手——查找功能
当我们输入文本的时候会出现匹配的个数与下标,点击上一个、下一个下标会跟着变动。

需求小能手——查找功能
接下来我们就要把匹配、上一个、下一个交互加上,前面提到了匹配是要用到正则,这个很简单,我们就用test方法将搜索文本当成匹配字符。
匹配到之后就是高亮效果,高亮简单写一个样式就可以,但是如何在label替换出来呢?我们使用replace方法将label中匹配到的文本替换成有高亮样式的文本。所以label我们根据是否有搜索文本去展示,而且高亮样式也有两种,匹配到的样式跟选择匹配的样式,这些我们通过if else跟三目运算进行实现,具体的代码如下:

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

需求小能手——查找功能
此时我们输入搜索文本,就能看到匹配效果:

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

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

总结

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

原文链接:https://juejin.cn/post/7267107420655435836 作者:躺平使者

(0)
上一篇 2023年8月15日 上午10:58
下一篇 2023年8月15日 上午11:10

相关推荐

发表回复

登录后才能评论