前端做模糊搜索

我们先看一下效果图:

这是搜索关键字 时,会自动匹配到 方法

同样,我们再看另一个例子

通过关键字 会匹配到好几个结果

这个和一些编辑器的搜索功能很像,比如 sublime text,不需要知道关键字的完整拼写,只需要知道其中的几个字母即可。

那么这个功能在前端我们如何去实现呢?

不考虑性能的话,我们可以用正则简单实现如下:

把关键字拆分,加入 (.?),如 cfg 最终为 (.?)(c)(.?)(f)(.?)(g)(.*?), 然后拿这个正则去测试要搜索的列表,把符合要求的选项给拿出来即可

考虑到要高亮结果,我们还要生成对应的替换表达式,最后的函数如下

调用 把关键字传入,拿返回值的 去检测搜索的列表,把符合的保存下来即可。

到目前为止我们只实现了搜索功能,按更优的体验来讲,在搜索结果中,要优先把相连匹配的放在首位,如 关键字,要把 结果放到 前面。第二个截图是有优化的地方的。

要完成这个功能,我们使用 返回值中的 ,用它进行检测,把结果中长度最长的放前面即可,这块代码以后有时间再补充

2018.5.31 今天重构了下,增加了结果排序,完整的代码及使用示例如下

对搜索结果中的内容做进一步处理渲染出来即可,比如把 替换成 把 替换成 显示到页面上就完成了高亮显示

作者:行列

https://segmentfault.com/a/1190000015486180

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180708A1A93100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券