List Filter 2 (Lebih sederhana)

Gak ada animasinya, dari sini: http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/

by xaliber

HTML

<section id="content_sidebar"><h3>Kategori</h3>
    <input class="filterinput" type="text" placeholder="Ketik pencarian..." />
<ul class="first" style="
    overflow: auto;
    height: 200px;
"><li><a href="/pakaian/jual"><span>Pakaian</span> (137496)</a></li><li><a href="/buku/jual"><span>Buku</span> (65584)</a></li><li><a href="/aksesoris_handphone/jual"><span>Aksesoris Handphone</span> (47215)</a></li><li><a href="/tas/jual"><span>Tas</span> (45417)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/sepatu/jual"><span>Sepatu</span> (30781)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/mainan/jual"><span>Mainan</span> (14304)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/all/jual"><span> Makeup</span> (11977)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/makeup/jual"><span>Makeup</span> (8960)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/aksesoris_kamera/jual"><span>Aksesoris Kamera</span> (8172)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/jam_tangan/jual"><span>Jam Tangan</span> (7649)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/aksesoris_komputer/jual"><span>Aksesoris Komputer</span> (7281)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/handphone/jual"><span>Handphone</span> (6911)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/kursi/jual"><span>Kursi</span> (6256)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/memorycard/jual"><span>Memorycard</span> (5569)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/headphone/jual"><span>Headphone</span> (4672)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/makanan/jual"><span>Makanan</span> (4541)</a></li><li style="display: list-item;" class="maxlist-hidden"><a href="/all/jual"><span>Dekorasi</span>...

JavaScript

/**
 * fastLiveFilter jQuery plugin 1.0.3
 * 
 * Copyright (c) 2011, Anthony Bush
 * License: <http://www.opensource.org/licenses/bsd-license.php>
 * Project Website: http://anthonybush.com/projects/jquery_fast_live_filter/
 **/

jQuery.fn.fastLiveFilter = function(list, options) {
	// Options: input, list, timeout, callback
	options = options || {};
	list = jQuery(list);
	var input = this;
	var lastFilter = '';
	var timeout = options.timeout || 0;
	var callback = options.callback || function() {};
	
	var keyTimeout;
	
	// NOTE: because we cache lis & len here, users would need to re-init the plugin
	// if they modify the list in the DOM later.  This doesn't give us that much speed
	// boost, so perhaps it's not worth putting it here.
	var lis = list.children();
	var len = lis.length;
	var oldDisplay = len > 0 ? lis[0].style.display : "block";
	callback(len); // do a one-time callback on initialization to make sure everything's in sync
	
	input.change(function() {
		// var startTime = new Date().getTime();
		var filter = input.val().toLowerCase();
		var li, innerText;
		var numShown = 0;
		for (var i = 0; i < len; i++) {
			li = lis[i];
			innerText = !options.selector ? 
				(li.textContent || li.innerText || "") : 
				$(li).find(options.selector).text();
			
			if (innerText.toLowerCase().indexOf(filter) >= 0) {
				if (li.style.display == "none") {
					li.style.display = oldDisplay;
				}
				numShown++;
			} else {
				if (li.style.display != "none") {
					li.style.display = "none";
				}
			}
		}
		callback(numShown);
		// var endTime = new Date().getTime();
		// console.log('Search for ' + filter + ' took: ' + (endTime - startTime) + ' (' + numShown + ' results)');
		return false;
	}).keydown(function() {
		clearTimeout(keyTimeout);
		keyTimeout = setTimeout(function() {
			if( input.val() === lastFilter ) return;
			lastFilter = input.val();
			input.change();
		}, timeout);
	});
	return this; // maintain jQuery chainability
}

 $(function() {
       ...