Welcome to join the Human high quality front-end framework research group, Band fly

Hello, everyone. I am Karsong.

In CSS, we select a style fragment using a selector:

.title {
  color: red;
}
Copy the code

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

For another Angle, we can also say: keyword. Title corresponding data color: red;

What else in our lives depends on this correspondence?

One obvious example: search engines.

Enter the keyword in the search engine, the search engine after retrieval, return the corresponding keyword data.

Since the principle is the same, can you use pure CSS to implement a search engine?

Don’t say, machine (no) wisdom (chat) or a lot of people, really someone made CSS to achieve the search engine.

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

Here’s how he did it.

Core principles

Basically, we need a search box and a container to display the search results.

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

Note that onInput uses one line of JS code, which is the only line of JS code in the engine

We want to type Tim, #result to display the search result Tim Carry.

This can be done with attribute selectors + pseudo-elements:

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

Where I in the property selector stands for ignoring content case.

This is the core principle of this search engine, in theory, as long as the more selector rules, the richer the search results.

Multiple search results

Let’s expand. Suppose there are 150 employees and establish a corresponding relationship for each of them:

One div per 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>
Copy the code

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" }
Copy the code

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

#results div { display: none }
Copy the code

Then, select a granularity and set up search rules, such as we select “last name” as granularity:

input[value="alexandre" i] ~ #results #result15.input[value="alexandre" i] ~ #results #result16.input[value="alexandre" i] ~ #results #result17 {
 display: block
}
Copy the code

When the last name alexandre is entered, the corresponding result will display: block:

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

Further down the line, the name can be broken down into more detail, so the search can be more granular:

It can be one letter, two letters, three letters… Establish correspondence.

Search term highlighting

To enhance the experience, we also want search term highlighting.

For example, when you type CLE, the search result name is cle in bold:

It can be achieved in 2 steps:

  1. Custom fonts

In the private area of UTF-8, define a bold font for each letter, for example: m corresponds to \e64d in this font.

  1. Replace regular letters with bold fonts in search results

For example, the search result for MAR would be Marion Aguirre.

Replace Mar in the result with \e64d \ e661\ e672, which is the bold letter corresponding to Mar in the custom font.

conclusion

According to this setting, restrict this search engine, only the imagination of the author.

For example, using the Order property of the Flex layout, bid ranking is not a dream:

If you think about it for a moment and ask, with a bit of doubt, is the CSS file big?

Ah, can only say, small, small pattern.

Although the CSS file containing 150 employees is 8MB large, but after all, the harvest is happy……