Building a
search engine
with
CSS
Tim Carry
Hacking is...
Overcoming
limitations
of a
system
to
achieve
new
outcomes.
A search engine
Keywords
Results
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
Alexandra
a
,
al
,
ale
,
alex
,
alexa
,
alexan
,
alexand
,
alexandr
,
alexandra
Alexandria
a
,
al
,
ale
,
alex
,
alexa
,
alexan
,
alexand
,
alexandr
,
alexandri
,
alexandria
Alexander
a
,
al
,
ale
,
alex
,
alexa
,
alexan
,
alexand
,
alexande
,
alexander
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
.
Building a search engine with CSS
Tim Carry
@pixelastic
www.algolia.com/css
Building a search engine with CSS
Tim Carry
@pixelastic