[[423373]]

大家好，我卡頌。

在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是加粗顯示的： 

[[423375]]

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

自定義字體

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

在搜索結(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大，但是畢竟收獲了快樂......

參考資料

[1]CSS實(shí)現(xiàn)的搜索引擎:

https://community.algolia.com/algoliasearch-client-css/demo/