CSS Search

search.js

// Modified from http://redotheweb.com/2013/05/15/client-side-full-text-search-in-css.html
// you'll need to add type='text/css' to the style tag in the HTML for this to work in IE<9

(function() {
  var addslashes = function(str) {
    return (str + '')
  .replace(/[\\"']/g, '\\$&')
  .replace(/\u0000/g, '\\0');
  };

  //http://stackoverflow.com/questions/5574842/best-way-to-check-for-ie-less-than-9-in-javascript-without-library
  var ie = (function(){

    var undef,
      v = 3,
      div = document.createElement('div'),
      all = div.getElementsByTagName('i');

  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
    );

  return v > 4 ? v : undef;

  }());

  var handler = function() {
    var searchStyle = document.getElementById('search_style');
    if (!this.value) {
      if (ie < 9) {
        searchStyle.styleSheet.cssText = '';
      } else {
        searchStyle.innerHTML = '';
      }
      return;
    }

    if (ie < 9) {
      searchStyle.styleSheet.cssText = ".searchable { display: none; } .searchable[data-index*=\"" + addslashes(this.value.toLowerCase()) + "\"] { display: block; }";
    } else {
      searchStyle.innerHTML = ".searchable:not([data-index*=\"" + addslashes(this.value.toLowerCase()) + "\"]) { display: none; }";
    }

  };

  $('#search').keyup(handler);
})();