使用CSS实现一个搜索引擎的原理解析


Posted in HTML / CSS onSeptember 25, 2021

大家好,我卡颂。

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

.title {
  color: red;
}

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

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

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

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

使用CSS实现一个搜索引擎的原理解析

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

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

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

使用CSS实现一个搜索引擎的原理解析

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

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

核心原理

最基本的,我们需要一个搜索框,和一个显示搜索结果的容器。

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

注意oninput使用了一行JS代码,这也是引擎中唯一一行JS代码

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

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

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

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

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

多个搜索结果

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

每个员工一个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>

每个员工一条搜索结果:

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

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

#results div { display: none }

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

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

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

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

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

使用CSS实现一个搜索引擎的原理解析

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

使用CSS实现一个搜索引擎的原理解析

搜索词高亮

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

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

使用CSS实现一个搜索引擎的原理解析

分为2步实现:

1.自定义字体

使用CSS实现一个搜索引擎的原理解析

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

2.在搜索结果中用加粗字体替换常规字母
比如,输入mar的搜索结果应该为:Marion Aguirre。

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

使用CSS实现一个搜索引擎的原理解析

总结

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

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

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

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

使用CSS实现一个搜索引擎的原理解析

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

参考资料

CSS实现的搜索引擎:
https://community.algolia.com/algoliasearch-client-css/demo/

到此这篇关于使用CSS实现一个搜索引擎的原理解析的文章就介绍到这了,更多相关css搜索引擎内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
sass 常用备忘案例详解
Sep 15 #HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 #HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 #HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 #HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 #HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 #HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 #HTML / CSS
You might like
怎样去阅读一份php源代码
2009/08/21 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
HTML5进度条特效
2014/12/18 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
自荐信的五个重要部分
2013/10/29 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
部队万能检讨书
2014/02/20 职场文书
慰问信格式
2015/02/14 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
刑事起诉书范文
2015/05/19 职场文书
介绍一下28个JS常用数组方法
2022/05/06 Javascript