如何用CSS實(shí)現(xiàn)一個(gè)搜索引擎？

作者：卡頌 2021-09-13 06:03:42

在搜索引擎中輸入關(guān)鍵詞，搜索引擎經(jīng)過(guò)檢索，返回關(guān)鍵詞對(duì)應(yīng)的數(shù)據(jù).既然道理都一樣，那能不能用純CSS實(shí)現(xiàn)一個(gè)搜索引擎呢?本文來(lái)聊聊他是如何實(shí)現(xiàn)的。

[[423373]]

大家好，我卡頌。

在CSS中，我們通過(guò)selector(選擇器)選擇樣式片段：

.title { 
  color: red; 
}

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

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

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

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

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

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

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

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

本文來(lái)聊聊他是如何實(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。

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

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

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

這就是本搜索引擎的核心原理，理論上只要選擇器規(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" }

接下來(lái)，設(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ì)：