源 / 魔術(shù)師卡頌        文/ 卡頌

大家好，我卡頌。

在CSS中，我們通過selector（選擇器）選擇樣式片段：

.title {
  color: red;
}

簡(jiǎn)而言之，選擇器title對(duì)應(yīng)樣式color: red;

換個(gè)角度，我們也可以說：關(guān)鍵詞.title對(duì)應(yīng)數(shù)據(jù)color: red;

在我們生活中，還有什么東西依賴這種對(duì)應(yīng)關(guān)系呢？

一個(gè)很顯然的例子：搜索引擎。

在搜索引擎中輸入關(guān)鍵詞，搜索引擎經(jīng)過檢索，返回關(guān)鍵詞對(duì)應(yīng)的數(shù)據(jù).

既然道理都一樣，那能不能用純CSS實(shí)現(xiàn)一個(gè)搜索引擎呢？

別說，機(jī)（無）智（聊）的人還是很多的，真的有人搞了CSS實(shí)現(xiàn)的搜索引擎^[1]。

在該搜索引擎中輸入員工姓名，會(huì)顯示員工信息。

本文來聊聊他是如何實(shí)現(xiàn)的。

核心原理

最基本的，我們需要一個(gè)搜索框，和一個(gè)顯示搜索結(jié)果的容器。

<input type="search" value=""
  oninput="this.setAttribute('value', this.value)"
/>
<div id="result"></div>

注意oninput使用了一行JS代碼，這也是引擎中唯一一行JS代碼

我們希望輸入Tim，#result容器內(nèi)顯示搜索結(jié)果Tim Carry。

可以通過屬性選擇器 + 偽元素實(shí)現(xiàn)：

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

其中屬性選擇器中的i代表忽略內(nèi)容大小寫。

這就是本搜索引擎的核心原理，理論上只要選擇器規(guī)則越多，搜索結(jié)果就越豐富。

多個(gè)搜索結(jié)果

讓我們繼續(xù)擴(kuò)展。假設(shè)有150個(gè)員工，為他們一一建立對(duì)應(yīng)關(guān)系：

每個(gè)員工一個(gè)div：

<div id="results">
  <div id="result0"></div>
  <div id="result1"></div>
  <div id="result2"></div>
  […]
  <div id="result148"></div>
  <div id="result149"></div>
  <div id="result150"></div>
</div>

每個(gè)員工一條搜索結(jié)果：

#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" }

接下來，設(shè)定搜索規(guī)則，首先隱藏所有搜索結(jié)果：

#results div { display: none }

然后，選擇一個(gè)粒度，建立搜索規(guī)則，比如我們選擇“姓”作為粒度：

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

當(dāng)輸入alexandre這個(gè)姓時(shí)，對(duì)應(yīng)的結(jié)果會(huì)display: block：

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

更近一步，姓名可以拆的更細(xì)，所以搜索的粒度可以更細(xì)：

可以分別以一個(gè)字母、兩個(gè)字母、三個(gè)字母...建立對(duì)應(yīng)關(guān)系。

搜索詞高亮

為了提升體驗(yàn)，我們還希望「搜索詞高亮」。

比如，輸入cle后，搜索結(jié)果姓名中cle是加粗顯示的：

分為2步實(shí)現(xiàn)：

1. 自定義字體

在UTF-8的私有區(qū)域，為每個(gè)字母定義對(duì)應(yīng)的加粗字體，比如：m在該字體中對(duì)應(yīng)\e64d。

2. 在搜索結(jié)果中用加粗字體替換常規(guī)字母

比如，輸入mar的搜索結(jié)果應(yīng)該為：Marion Aguirre。

將結(jié)果中的Mar替換為\e64d \e661 \e672，也就是自定義字體中對(duì)應(yīng)Mar的粗體字母。

總結(jié)

按照這個(gè)設(shè)定，制約本搜索引擎的，只有作者的想象力了。

比如使用flex布局的order屬性，競(jìng)價(jià)排名不是夢(mèng)：

如果你思考一陣，略帶疑惑的問：那CSS文件會(huì)不會(huì)很大？

哎，只能說，小了，格局小了。

雖然收錄150個(gè)員工的CSS文件有8MB大，但是畢竟收獲了快樂......

參考資料