How to implement a search engine with CSS?

Hi everyone, I'm Kasong.

In CSS , we select the style fragment selector

.title {
  color: red;
}

In short, the selector title corresponds to the style color: red;

From another perspective, we can also say: the keyword .title corresponds to the data color: red;

In our lives, what else depends on this correspondence?

An obvious example: search engines.

Enter the keyword in the search engine, and the search engine will return the data keyword after searching.

Since the truth is the same, can a search engine be realized CSS

Not to mention, the human machine (no) Chile (chat) is still a lot of, there are people who engage in search engine CSS implementation .

Enter the name of the employee in the search engine, and the employee information will be displayed.

This article talks about how he achieved it.

Core principle

At the most basic level, we need a search box and a container to display search results.

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

Note that oninput uses a line of JS code, which is the only line of JS code in the engine

We want to enter Tim , and the Tim Carry be displayed in the #result container.

It can be achieved by attribute selector + pseudo-element:

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

Among them, attribute selector of i represents ignoring the content case.

This is the core principle of this search engine. In theory, as long as there are more selector rules, the richer the search results will be.

Multiple search results

Let us continue to expand. Assuming there are 150 employees, establish a corresponding relationship for them one by one:

div each employee:

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

One search result per employee:

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

Next, set the search rules, first hide all search results:

#results div { display: none }

Then, select a granularity and establish search rules. For example, we choose "surname" as the granularity:

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

When alexandre entered, the corresponding result will be display: block :

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

One step further, the name can be split more finely, so the granularity of the search can be finer:

can be established with one letter two letters three letters 16142b33d45b37... respectively.

Search term highlighting

In order to improve the experience, we also hope that the search term will be highlighted as .

For example, cle , 06142b33d45bb2 in the search result name is cle in bold:

Divided into 2 steps:

1. Custom font

In UTF-8 , define the corresponding bold font for each letter, for example: m \e64d in this font.

2. Replace regular letters with bold fonts in search results

For example, the search result of mar Marion Aguirre .

Replace \e64d \e661 \e672 in the Mar with 06142b33d45d5a, which is the bold letter Mar

Summarize

According to this setting, the only restriction on this search engine is the imagination of the author.

For example, using the order flex layout, the bidding ranking is not a dream:

If you think about it for a while, ask with a little doubt: CSS file be very large?

Hey, I can only say that if it is smaller, the structure is smaller.

CSS file containing 150 employees is 8MB large, it is a joy after all...

Welcome to join the human high-quality front-end framework research group , lead the flight