Building a search engine with CSS

Building a

search engine

with

CSS

Tim Carry

@pixelastic

Hacking is...

Overcoming

limitations

of a

system

to

achieve

new

outcomes.

A search engine

Keywords

Results

Live demo

CSS has limited support for:

Variables

Conditions

Loops

Functions

Regular expressions

Selectors

Main strength of CSS

Selecting only

relevant

items

from a

large pool

of choices

Core principles

#result

<input type="search" value="Tim" />
<div id="result"></div>

Core principles

#result

input[value="tim" i] {
 background: blue;
}

Core principles

#result

input[value="tim" i] ~ #result {
 background: blue;
}

Core principles

Tim Carry

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

Does not work...

#result

<input type="search" value="" />
<div id="result"></div>

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

Adding an

oninput

handler

#result

Tim Carry

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

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

Several results at once

Alexandre Collin

Alexandre Meunier

Alexandre Stanislawski

More divs

<input 
 type="search" value="" 
 oninput="…" 
/>
<!-- 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>

// Pre-fill the content
#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" }

// Hide them all
#results div { display: none }

// Show only for matching keywords
input[value="alexandre" i] ~ #results #result15,
input[value="alexandre" i] ~ #results #result16,
input[value="alexandre" i] ~ #results #result17 {
 display: block
}

Several results at once

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

Aurora Pleguezuelo

[…]

Alexandre Collin

Alexandre Meunier

Alexandre Stanislawski

[…]

Zo Asmail

Searching and Indexing

Searching

What will I find if I

search for

alex

?

Indexing

What should a user type to find

Alexandre

?

Potential results:

Keyword to type:

Alexandre

a

,

al

,

ale

,

alex

,

alexa

,

alexan

,

alexand

,

alexandr

,

alexandre

Alexander

a

,

al

,

ale

,

alex

,

alexa

,

alexan

,

alexand

,

alexande

,

alexander

Alexandra

a

,

al

,

ale

,

alex

,

alexa

,

alexan

,

alexand

,

alexandr

,

alexandra

Alexandria

a

,

al

,

ale

,

alex

,

alexa

,

alexan

,

alexand

,

alexandr

,

alexandri

,

alexandria

input[value="a" i]          ~ #results #result22,
input[value="al" i]         ~ #results #result22,
input[value="ale" i]        ~ #results #result22,
input[value="alex" i]       ~ #results #result22,
input[value="alexa" i]      ~ #results #result22,
input[value="alexan" i]     ~ #results #result22,
input[value="alexand" i]    ~ #results #result22,
input[value="alexandr" i]   ~ #results #result22,
input[value="alexandri" i]  ~ #results #result22,
input[value="alexandria" i] ~ #results #result22 {
 display: block
}

+ last name & job title

+ accented characters

+ synonyms

+ typo-tolerance

x 150

Matching everything

Alexandria Avritch

Event

Mar

keting Manager

Doug Do

OSDR - Mid

Mar

ket

Karim

Matr

ah

Software Engineer

Mar

ie-Laure Thuret

Software Engineer

Mar

ion Aguirre

Recruiter

Mar

tin Sallé

Account Executive

Mar

yann Kongovi

VP of Operations

Neil Richler

Growth

Mar

keting

Pawel Zawisza

OSDR - Mid

Mar

ket

Ordering results

#results div { flex: 1; }

input[value="mar" i] ~ #results #result16  { order: 1; }
input[value="mar" i] ~ #results #result8   { order: 2; }
input[value="mar" i] ~ #results #result4   { order: 3; }
input[value="mar" i] ~ #results #result15  { order: 4; }
input[value="mar" i] ~ #results #result42  { order: 5; }
input[value="mar" i] ~ #results #result23  { order: 6; }
input[value="mar" i] ~ #results #result117 { order: 7; }
input[value="mar" i] ~ #results #result28  { order: 8; }
input[value="mar" i] ~ #results #result110 { order: 9; }

Mar

ie-Laure Thuret

Software Engineer

Mar

ion Aguirre

Recruiter

Mar

tin Sallé

Account Executive

Mar

yann Kongovi

VP of Operations

Karim

Matr

ah

Software Engineer

Alexandria Avritch

Event

Mar

keting Manager

Neil Richler

Growth

Mar

keting

Doug Do

OSDR - Mid

Mar

ket

Pawel Zawisza

OSDR - Mid

Mar

ket

Highlight

Mar

ion Aguirre

#result8:before { 
  content: "Marion Aguirre"; 
}

Custom font

\e600 - \e700

Mar

ion Aguirre

input[value="mar" i] ~ #results #result8:before { 
  content: "\e64d \e661 \e672 ion Aguirre"; 
}

Mari

on Aguirre

input[value="mari" i] ~ #results #result8:before { 
  content: "\e64d \e661 \e672 \e669 on Aguirre"; 
}

Impossible only means you haven't found the solution

yet

.

algolia.com/css/demo

algolia/algoliasearch-client-css

Tim Carry

@pixelastic