Client-side full-text filter in CSS

gistfile1.html

<input type="text" placeholder="filter" id="filter">
<ul class="contacts">
  <li class="filterable" data-index="all my lower case search terms">
    All my lower case search terms
  </li>
  <li class="filterable" data-index="lowerlowercasecase">
    Lower lower case case
  </li>
  <!-- add as much data as you want, add the selector class and add the terms in data-index -->
</ul>
 
<style id="filter_style"></style>
<script type="text/javascript">
var filterStyle = document.getElementById('filter_style');
document.getElementById('filter').addEventListener('input', function() {
  if (!this.value) {
    filterStyle.innerHTML = "";
    return;
  }
  filterStyle.innerHTML = ".filterable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
});
</script>