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

[[423373]]

成都创新互联公司是专业的云南网站建设公司，云南接单;提供网站设计、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行云南网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

大家好，我卡颂。

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

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

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

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

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

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

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

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.   
  
  
  
  2.   oninput="this.setAttribute('value', this.value)" 
    3.   
  
  
  
  3. /> 
    4.
 

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

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

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

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

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

多个搜索结果

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

每个员工一个div：

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

    • 每个员工一条搜索结果：

     
 
 
 
      
  
  
  
  
    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.

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

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

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

     
 
 
 
      
  
  
  
  
    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.

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

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

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

    可以分别以一个字母、两个字母、三个字母...建立对应关系。

    搜索词高亮

    为了提升体验，我们还希望「搜索词高亮」。

    比如，输入cle后，搜索结果姓名中cle是加粗显示的： 

    [[423375]]

    分为2步实现：

    自定义字体

    在UTF-8的私有区域，为每个字母定义对应的加粗字体，比如：m在该字体中对应\e64d。

    在搜索结果中用加粗字体替换常规字母

    比如，输入mar的搜索结果应该为：Marion Aguirre。

    将结果中的Mar替换为\e64d \e661 \e672，也就是自定义字体中对应Mar的粗体字母。

    总结

    按照这个设定，制约本搜索引擎的，只有作者的想象力了。

    比如使用flex布局的order属性，竞价排名不是梦：

    如果你思考一阵，略带疑惑的问：那CSS文件会不会很大?

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

    虽然收录150个员工的CSS文件有8MB大，但是毕竟收获了快乐......

    参考资料

    [1]CSS实现的搜索引擎:

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

     

    当前标题：如何用CSS实现一个搜索引擎？
    网站URL：http://www.csdahua.cn/qtweb/news1/486951.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    定制开发知识

    同城分类信息

    网络推广公司　　 　合江网站建设　　 　成都微信小程序开发　　 　成都网站建设　　 　成都托管服务器　　 　中国（西部）云计算中心　　 　大英网站建设　　 　四川航空文化　　 　成都品牌官网设计公司　　 　专业网站设计　　 　资阳网站建设　　 　UI设计　　 　边坡防护网　　 　关键词优化　　 　眉山网站建设　　 　工业净化空调　　 　画册设计制作　　 　手机APP开发　　 　php空间　　 　专业网站建设