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

  发布时间:2021-09-13 16:44:51   作者:佚名   我要评论
这篇文章主要介绍了使用CSS实现一个搜索引擎的原理解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

大家好,我卡颂。

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

.title {
  color: red;
}

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

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

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

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

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

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

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

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

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

核心原理

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

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

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

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

搜索词高亮

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

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

分为2步实现:

1.自定义字体

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

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

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

总结

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

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

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

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

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

参考资料

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

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

相关文章

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

    这篇文章主要介绍了使用CSS实现一个搜索引擎的原理解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-13
  • 深入理解CSS 中 transform matrix矩阵变换问题

    css中transform属性中的translate、scale、rotate、skew变换属性均是通过matrix矩阵变换实现的。接下来通过本文给大家介绍CSS 中 transform matrix矩阵变换问题,感兴趣的
    2021-08-25
  • CSS+HTML 实现顶部导航栏功能

    这篇文章主要介绍了CSS+HTML 实现顶部导航栏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-24
  • 如何使用 resize 实现图片切换预览功能

    这篇文章主要介绍了如何使用 resize 实现图片切换预览功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-18
  • CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)

    这篇文章主要介绍了CSS 使用 resize 实现图片拖拽切换预览功能(强大功能),本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要
    2021-08-18
  • css中z-index: 0和z-index: auto的区别

    本文主要介绍了css中z-index: 0和z-index: auto的区别,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-11
  • CSS 即将支持嵌套,SASS/LESS 等预处理器该何去何从

    随着 CSS 自定义属性(CSS Variable)的大规模兼容,到如今 CSS 即将支持嵌套,一些预处理器的核心功能已经被 CSS 原生支持,这是否表示 SASS/LESS 等预处理器已无用武之地
    2021-08-10
  • CSS Transition通过改变Height实现展开收起元素

    一个常见的开发需要,我们希望折叠元素的一部分,本文主要介绍了CSS Transition通过改变Height实现展开收起元素,具有一定的参考价值,感兴趣的可以了解一下
    2021-08-05
  • 从QQtabBar看css命名规范BEM的详细介绍

    这篇文章主要介绍了从QQtabBar看css命名规范BEM的问题解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-08-04
  • css实现两栏布局,左侧固定宽,右侧自适应的多种方法

    今天通过7种方法给大家介绍css实现两栏布局,左侧固定宽,右侧自适应效果,每种方法通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2021-08-04

最新评论