背景

之前做晓程序的时候，看到过同事用js的实现，后来看张老师的css选择器事件的时候又看了纯css的实现。js和css都能实现这个效果，简单说一下这些实现方式吧

搜索结果展示

我在vue项目里用js的实现方式

实现原理就是，两份数据，两份dom，一份原始数据和dom，一份搜索结果的dom和数据。然后互相之间显示隐藏彼此互不干扰。这是一种纯js实现的方式。

js 实现搜索结果

那时候的我认为这就是一种最好的实现方式，除了这种实现方式我也没有想过别的实现方式了，那时候业务繁重，能做完就好了，压根没时间想别的。

这确实是一种实现方式，也很不错。后来看了张老师的书以后我又发现了一种更好的实现方式

我在vue项目里面用纯css的实现方式

一次意外知道了张老师又出了一本新书，css 选择器世界，当时为了凑单买了，之后发现真香，学到了很多。

这种方式相对于之前简单了很多，就是css控制，利用的是选择器的小技巧。我个人也更加喜欢这种，因为简单，容易

css 实现搜索结果

搜索结果高亮

之前实现过模糊匹配，匹配到结果之后，展示结果并且输入关键字高亮，这个对比之前难度就增加了不少

我的实现思路

这个好像就是只能借助js实现了，在第一种实现的方式上面在多加一点逻辑，把匹配的字进行一轮遍历，匹配的结果用span标签包裹起来。最后返回页面显示。

具体的代码就补贴了，

我看别人的实现思路

依旧是张老师的书里面看到的，对我来说这就是万能的宝藏呀。

搜索结果高亮

实现的原理就是

1. 输入字遍历文本

2. 找到匹配到的文本在页面中的位置

3. 该位置加一个背景颜色

代码实现起来有一点点难度，但是同时你会学到一些新的东西，关于document.createRange()的知识，我建议都看看学学。

这也是一种非常棒的实现

总结

连着写了两篇有点累了，虽然内容不多，拿来主义，消化和整理也是有点耗脑子的，特别是在周末，就不爱动了。动一动就觉得累，可能是平时用的太多了，周末他也想休息一下。加油