A Search Engine in CSS

basic-markup.html

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

matching-keywords.scss

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

oninput.html

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

selector.css

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

several-results.html

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

several-results.scss

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