Client-side full-text search in CSS Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript.

Client-side full-text search in CSS

Reference: 
Created by Redo The Web
http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html

The Search Code

<input type="text" placeholder="search" id="search">
<style id="search_style"></style>
<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
  if (!this.value) {
    searchStyle.innerHTML = "";
    return;
  }
  // look ma, no indexOf!
  searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
  // beware of css injections!
});
</script>

The Searchable List

<!-- Data generated by Faker, see https://github.com/fzaninotto/Faker -->
<ul class="contacts">
  <!-- Add text to the data-index attribute to enable full-text search -->
  <!-- Don't forget to lowercase it to make search case-insensitive -->
  <li class="searchable" data-index="[email protected]">
    <dl>
      <dt>First Name</dt><dd>Ona</dd>
      <dt>Last Name</dt><dd>Bednar</dd>
      <dt>Email</dt><dd>[email protected]</dd>
      <dt>Phone</dt><dd>1-265-479-1196x714</dd>
    </dl>
  </li>
  <li class="searchable" data-index="[email protected](121)644-5577">
    <dl>
      <dt>First Name</dt><dd>Newton</dd>
      <dt>Last Name</dt><dd>Cronin</dd>
      <dt>Email</dt><dd>[email protected]</dd>
      <dt>Phone</dt><dd>(121)644-5577</dd>
    </dl>
  </li>
  <!-- add as much data as you want -->
</ul>