Suneel kumar's: Search using css with demo

Dynamic stylesheet with a CSS3 selector for search, implement a client-side full-text search in CSS rather than JavaScript. Here is an example

Searchable List example:

	<style id="search_style"></style>

	<ul class="contacts">
	<!-- Data generated by Faker, see https://github.com/fzaninotto/Faker -->
	<li class="contact searchable" data-index="suneel2you@gamil(9703678559">
	<dl>
	<dt>First Name</dt>
	<dd>suneel</dd>
	<dt>Last Name</dt>
	<dd>kumar</dd>
	<dt>Email</dt>
	<dd>suneel2you@gmail.com</dd>
	<dt>Phone</dt>
	<dd>+91-9703-678-559</dd>
	</dl>
	</li>
	<li class="contact searchable" data-index="chkarthikv@gmail.com(9133311907)">
	<dl>
	<dt>First Name</dt>
	<dd>karthik</dd>
	<dt>Last Name</dt>
	<dd>veerababu</dd>
	<dt>Email</dt>
	<dd>chkveerababu@gmail.com</dd>
	<dt>Phone</dt>
	<dd>(+91)-913-3311-907</dd>
	</dl>
	</li>
	</style>

view raw search.html hosted with ❤ by GitHub

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

view raw searchcss.js hosted with ❤ by GitHub