mundry/css-filter.js

## css-filter.js
(function() {
  var searchStyle = document.getElementById('search-style');
  var searchfield = document.getElementById('filter-field')

  var injectCssRule = function(query) {
    return query === "" ? "" : ('h1:not([data-filter-keywords*="' + query.replace(/\\/g, "") + '"]) { display: none; }');
  }

  searchfield.addEventListener("keyup", function() {
    searchStyle.innerHTML = injectCssRule(searchfield.value.trim().toLowerCase());
  });
})();

## index.html
<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS Filtering</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
    <style>
      body {
        font-family: sans-serif;
      }
      h1 {
        font-size: 1.4em;
      }
    </style>
    <style id="search-style"></style>
  </head>

  <!--[if lt IE 7]>      <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  <!--[if IE 7]>         <body class="lt-ie9 lt-ie8"> <![endif]-->
  <!--[if IE 8]>         <body class="lt-ie9"> <![endif]-->
  <!--[if gt IE 8]><!--> <body> <!--<![endif]-->
  <div id="filterarea">
    <input type="text" id="filter-field" />
  </div>

  <h1 data-filter-keywords="complex but not dynamic using a static site to crowdsource playgrounds">Complex But Not Dynamic: Using A Static Site To Crowdsource Playgrounds</h1>
  <h1 data-filter-keywords="how to setup your mac to develop news applications like we do">How to Setup Your Mac to Develop News Applications Like We Do</h1>
  <h1 data-filter-keywords="user-generated graphics in the browser with svg">User-generated graphics in the browser with SVG</h1>
  <h1 data-filter-keywords="be our summer intern">Be our summer intern!</h1>
  <h1 data-filter-keywords="how to build a news app that never goes down and costs you practically nothing">How to build a news app that never goes down and costs you practically nothing</h1>
  <h1 data-filter-keywords="we re looking for teammates">We're looking for teammates!</h1>
  <h1 data-filter-keywords="our first news apps tracking weather and elections">Our first news apps: Tracking weather and elections</h1>
  <h1 data-filter-keywords="election 2012 electoral combinations">Election 2012: Electoral combinations</h1>
  <h1 data-filter-keywords="hello world nerd blogging with jekyll">Hello world: Nerd blogging with Jekyll</h1>


  <script src="css-filter.js"></script>
  </body>
</html>
	(function() {
	var searchStyle = document.getElementById('search-style');
	var searchfield = document.getElementById('filter-field')

	var injectCssRule = function(query) {
	return query === "" ? "" : ('h1:not([data-filter-keywords*="' + query.replace(/\\/g, "") + '"]) { display: none; }');
	}

	searchfield.addEventListener("keyup", function() {
	searchStyle.innerHTML = injectCssRule(searchfield.value.trim().toLowerCase());
	});
	})();
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>CSS Filtering</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
	<style>
	body {
	font-family: sans-serif;
	}
	h1 {
	font-size: 1.4em;
	}
	</style>
	<style id="search-style"></style>
	</head>

	<!--[if lt IE 7]> <body class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <body class="lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <body class="lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <body> <!--<![endif]-->
	<div id="filterarea">
	<input type="text" id="filter-field" />
	</div>

	<h1 data-filter-keywords="complex but not dynamic using a static site to crowdsource playgrounds">Complex But Not Dynamic: Using A Static Site To Crowdsource Playgrounds</h1>
	<h1 data-filter-keywords="how to setup your mac to develop news applications like we do">How to Setup Your Mac to Develop News Applications Like We Do</h1>
	<h1 data-filter-keywords="user-generated graphics in the browser with svg">User-generated graphics in the browser with SVG</h1>
	<h1 data-filter-keywords="be our summer intern">Be our summer intern!</h1>
	<h1 data-filter-keywords="how to build a news app that never goes down and costs you practically nothing">How to build a news app that never goes down and costs you practically nothing</h1>
	<h1 data-filter-keywords="we re looking for teammates">We're looking for teammates!</h1>
	<h1 data-filter-keywords="our first news apps tracking weather and elections">Our first news apps: Tracking weather and elections</h1>
	<h1 data-filter-keywords="election 2012 electoral combinations">Election 2012: Electoral combinations</h1>
	<h1 data-filter-keywords="hello world nerd blogging with jekyll">Hello world: Nerd blogging with Jekyll</h1>


	<script src="css-filter.js"></script>
	</body>
	</html>