Result

input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。

jQuery

var jSearch = (function (){
	// 対象のセレクタ
	var input = $('input');
	var items = $('.item');
	
	// 検索部分
	input.keyup(function() {
		// パフォーマンスAPI
		var t0 = performance.now();
		var input = $(this).val();
		//マッチの有無で対象の要素を透過
		switch(true){	
			case input === '':
				items.css('opacity', '1');
				break;
			default:
				items.css('opacity', '0.2');
				items.filter('[data-type*="' + input.toLowerCase() + '"]').css('opacity', '1');			
				break;
		}
		var t1 = performance.now();
		console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
	});
})();

html

<input style="margin-bottom:1em ;" placeholder="検索">
  <ul>
	<li class="item hide" data-type="田中花子">田中花子</li>
	<li class="item hide" data-type="高橋花子">高橋花子</li>
	<li class="item hide" data-type="佐藤花子">佐藤花子</li>
	<li class="item hide" data-type="田中太郎">田中太郎</li>
	<li class="item hide" data-type="高橋太郎">高橋太郎</li>
	<li class="item hide" data-type="佐藤太郎">佐藤太郎</li>
  <li class="item hide" data-type="田中たけし">田中たけし</li>
	<li class="item hide" data-type="高橋たけし">高橋たけし</li>
	<li class="item hide" data-type="佐藤たけし">佐藤たけし</li>
  </ul>

via

jSearch