当前位置: 首页 > 科技观察

如何用CSS实现一个搜索引擎?

时间:2023-03-17 20:20:38 科技观察

大家好,我是Kason。在CSS中,我们通过一个选择器来选择样式片段:.title{color:red;}简而言之,选择器标题对应于样式color:red;换个角度,我们也可以说:关键字.title对应Datacolor:red;在我们的生活中,还有什么依赖于这种对应关系呢?一个明显的例子:搜索引擎。在搜索引擎中输入关键字,搜索引擎检索后会返回关键字对应的数据。既然原理一样,那搜索引擎能不能用纯CSS来实现呢?更不用说,聪明(聊天)的人还有很多,还有人真正搞过CSS实现的搜索引擎[1]。在此搜索引擎中输入员工姓名,将显示员工信息。本文将谈谈他是如何实现的。核心原理是最基本的,我们需要一个搜索框和一个展示搜索结果的容器。

注意oninput用了一行JS代码,同样是引擎中唯一的一行JS代码,我们要输入Tim,搜索结果TimCarry会显示在#result容器中。可以通过属性选择器+伪元素来实现:input[value="tim"i]~#result:before{content:"TimCarry";}其中属性选择器中的i表示忽略内容的大小写。这是这个搜索引擎的核心原理。理论上,只要选择器规则越多,搜索结果就会越丰富。多个搜索结果让我们继续扩大。假设有150名员工,为他们一一建立对应关系:每个员工一个div:
[…]每个员工一个搜索结果:#result0:before{content:"AuroraPleguezelo"}//[…]#result15:before{content:"AlexandreCollin"}#result16:before{content:"AlexandreMeunier"}#result17:before{content:"AlexandreStanislawski"}//[…]#result150:before{content:"ZoAsmail"}接下来,设置搜索规则,首先隐藏所有搜索结果:#resultsdiv{display:none}然后,选择一个粒度,创建搜索规则,比如我们选择“姓氏”作为粒度:input[value="alexandre"i]~#results#result15,input[value="alexandre"i]~#results#result16,input[value="alexandre"i]~#results#result17{display:block}当输入姓氏alexandre时,会显示对应的结果:block:#result15:before{content:"AlexandreCollin"}#result16:before{content:"AlexandreMeunier"}#result17:before{content:"AlexandreStanislawski"}更进一步,名称可以拆分成更多细节,所以搜索的粒度可以更细:可以用一个字母、两个字母、三个字母……建立搜索词高亮显示的对应关系。为了提升体验,我们还想“搜索词高亮”。例如输入cle后,搜索结果名称中的cle以粗体显示:分两步实现:自定义字体在UTF-8的私有区域,对应的粗体为为每个字母定义,例如:m在这个对应字体中的\e64d。在搜索结果中,将常规字母替换为粗体。比如输入mar的搜索结果应该是:MarionAguirre。将结果中的Mar替换为\e64d\e661\e672,即自定义字体中对应Mar的粗体字母。总结按照这样的设定,只有笔者的想象力限制了这个搜索引擎。比如利用flex布局的order属性,竞价排名不是梦:想了想,有点疑惑的问:CSS文件会不会太大了?哎,只能说小,版面小。包含150名员工的CSS文件虽然有8MB大小,但毕竟收获了幸福……参考[1]CSS实现的搜索引擎:https://community.algolia.com/algoliasearch-client-css/demo/