您现在的位置是：亿华云 > 数据库

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

亿华云2025-10-03 11:45:58【数据库】4人已围观

简介大家好，我卡颂。在CSS中，我们通过selector(选择器)选择样式片段：.title{color:red;} 简而言之，选择器title对应样式color: red;换个角度，我们也

大家好，何用我卡颂。实搜索

在CSS中，引擎我们通过selector(选择器)选择样式片段：

.title { color: red; }

简而言之，何用选择器title对应样式color: red;

换个角度，实搜索我们也可以说：关键词.title对应数据color: red;

在我们生活中，引擎还有什么东西依赖这种对应关系呢?何用

一个很显然的例子：搜索引擎。

在搜索引擎中输入关键词，实搜索搜索引擎经过检索，引擎返回关键词对应的何用数据.

既然道理都一样，那能不能用纯CSS实现一个搜索引擎呢?实搜索

别说，机(无)智(聊)的引擎人还是很多的，真的何用有人搞了CSS实现的搜索引擎[1]。

在该搜索引擎中输入员工姓名，实搜索会显示员工信息。引擎

本文来聊聊他是如何实现的。

核心原理最基本的，我们需要一个搜索框，和一个显示搜索结果的容器。

<input type="search" value="" oninput="this.setAttribute(value, this.value)" /> <div id="result"></div> 注意oninput使用了一行JS代码，这也是网站模板引擎中唯一一行JS代码

我们希望输入Tim，#result容器内显示搜索结果Tim Carry。

可以通过属性选择器 + 伪元素实现：

input[value="tim" i] ~ #result:before { content: "Tim Carry"; }

其中属性选择器中的i代表忽略内容大小写。

这就是本搜索引擎的核心原理，理论上只要选择器规则越多，搜索结果就越丰富。

多个搜索结果

让我们继续扩展。假设有150个员工，为他们一一建立对应关系：

每个员工一个div：

每个员工一条搜索结果：

#result0:before { content: "Aurora Pleguezelo" } // […] #result15:before { content: "Alexandre Collin" } #result16:before { content: "Alexandre Meunier" } #result17:before { content: "Alexandre Stanislawski" } // […] #result150:before { content: "Zo Asmail" }

接下来，设定搜索规则，首先隐藏所有搜索结果：

#results div { display: none }

然后，选择一个粒度，建立搜索规则，比如我们选择“姓”作为粒度：

input[value="alexandre" i] ~ #results #result15, input[value="alexandre" i] ~ #results #result16, input[value="alexandre" i] ~ #results #result17 { display: block }

当输入alexandre这个姓时，对应的结果会display: block：

#result15:before { content: "Alexandre Collin" } #result16:before { content: "Alexandre Meunier" } #result17:before { content: "Alexandre Stanislawski" }

更近一步，姓名可以拆的更细，所以搜索的粒度可以更细：