文字を入力してリストを絞り込む

入力エリアに文字を入力すると、入力された文字列が含まれるリストだけ絞り込まれる処理を作ってみました。

サンプルコード

今回は英数の大文字・小文字の区別をなくしてみます。

HTML

<input type="text" id="search" />
<ul>
	<li class="js-extraction">Apple</span></li>
	<li class="js-extraction">Banana</span></li>
	<li class="js-extraction">Orange</span></li>
	<li class="js-extraction">Peach</span></li>
	<li class="js-extraction">Grape</span></li>
	<li class="js-extraction">Melon</span></li>
	<li class="js-extraction">Lemon</span></li>
	<li class="js-extraction">Watermelon</span></li>
	<li class="js-extraction">Pineapple</span></li>
	<li class="js-extraction">Muscat</span></li>
</ul>

JavaScript

$(function() {
	var $searchInput = $('#search'); // 入力エリア
	var $searchElem = $('.js-extraction'); // 絞り込む要素
	var excludedClass = 'is-excluded'; // 絞り込み対象外の要素に付与するclass

	// 絞り込み処理
	function extraction() {
		var keywordArr = $searchInput.val().toLowerCase().replace('　', ' ').split(' '); // 入力文字列を配列に格納
		$searchElem.removeClass(excludedClass).show();// 現在非表示にしているリストを表示する
		for (var i = 0; i < keywordArr.length; i++) {
			for (var j = 0; j < $searchElem.length; j++) {
				var thisString = $searchElem.eq(j).text().toLowerCase();
				if(thisString.indexOf(keywordArr[i]) == -1) { // 入力文字列と一致する文字列がない場合
					$searchElem.eq(j).addClass(excludedClass); // 絞り込み対象外のclass付与
				}
			}
		}
		$('.' + excludedClass).hide(); // 絞り込み対象外の要素の非表示
	}

	$searchInput.on('load keyup blur', function() {
		extraction();
	});
});

文字列内にスペースが含まれている場合、そこが単語の区切りとして分割して、すべての単語が含まれている要素のみ表示します。
文字を入力してリストを絞り込むデモページ