jQuery リストの絞込み
キーワードにマッチしたテキストリストのみを表示
jQuery
$(function () {
$('input[type=text]').keyup(function(){
// 絞込みキーワード取得
var keyword = $(this).val();
// 絞込み
$('li').each(function(){
// 一致
if ($(this).text().match(new RegExp( keyword, 'i' ))) {
$(this).show();
// 不一致
} else {
$(this).hide();
}
});
});
});
HTML
<form>
<input type="text">
</form>
<!--絞込み対象キーワード-->
<ul>
<li>aqua</li>
<li>black</li>
<li>blue</li>
（略）
<li>silver</li>
<li>teal</li>
<li>yellow</li>
</ul>
サンプル
