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>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。