日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
如何用CSS實(shí)現(xiàn)一個(gè)搜索引擎？

[[423373]]

成都創(chuàng)新互聯(lián)公司是專業(yè)的云南網(wǎng)站建設(shè)公司，云南接單;提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行云南網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

大家好，我卡頌。

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

 
 
 
 
    
  
  
  
  
  1. .title { 
    2.   
  
  
  
  2.   color: red; 
    3.   
  
  
  
  3. } 
    4.

簡(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é)果的容器。

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.   oninput="this.setAttribute('value', this.value)" 
    3.   
  
  
  
  3. /> 
    4.
 
  • 注意oninput使用了一行JS代碼，這也是引擎中唯一一行JS代碼

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

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

 
 
 
 
    
  
  
  
  
  1. input[value="tim" i] ~ #result:before { 
    2.   
  
  
  
  2.  content: "Tim Carry"; 
    3.   
  
  
  
  3. } 
    4.

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
 
  •   
    •  
  •   
    •  
  •   […] 
  •   
    •  
  •   
    •  
  •   
    •  
  •  

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

     
 
 
 
      
  
  
  
  
    1. #result0:before { content: "Aurora Pleguezelo" } 
      2.   
  
  
  
    2. // […] 
      3.   
  
  
  
    3. #result15:before { content: "Alexandre Collin" } 
      4.   
  
  
  
    4. #result16:before { content: "Alexandre Meunier" } 
      5.   
  
  
  
    5. #result17:before { content: "Alexandre Stanislawski" } 
      6.   
  
  
  
    6. // […] 
      7.   
  
  
  
    7. #result150:before { content: "Zo Asmail" } 
      8.

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

     
 
 
 
      
  
  
  
  
    1. #results div { display: none } 
      2.

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

     
 
 
 
      
  
  
  
  
    1. input[value="alexandre" i] ~ #results #result15, 
      2.   
  
  
  
    2. input[value="alexandre" i] ~ #results #result16, 
      3.   
  
  
  
    3. input[value="alexandre" i] ~ #results #result17 { 
      4.   
  
  
  
    4.  display: block 
      5.   
  
  
  
    5. } 
      6.

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

     
 
 
 
      
  
  
  
  
    1. #result15:before { content: "Alexandre Collin" } 
      2.   
  
  
  
    2. #result16:before { content: "Alexandre Meunier" } 
      3.   
  
  
  
    3. #result17:before { content: "Alexandre Stanislawski" } 
      4.

    更近一步，姓名可以拆的更細(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)：

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

    哎，只能說(shuō)，小了，格局小了。

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

    參考資料

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

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

     


    網(wǎng)站標(biāo)題：如何用CSS實(shí)現(xiàn)一個(gè)搜索引擎？
    網(wǎng)頁(yè)地址：http://www.dlmjj.cn/article/cdgesds.html