jQuery サジェスト形式でリストの絞込み

キーワードに前方一致したテキストリストのみを指定件数分表示

jQuery

$(function () { $('input[type=text]').keyup(function(){ // 候補表示 $('ul').show(); // 絞込みキーワード取得 var keyword = $(this).val(); var i = 0; // 絞込み $('li').each(function(){ // 一致 // フラグ i で大文字小文字区別なし if ($(this).text().match(new RegExp('^' + keyword, 'i'))) { $(this).show(); i++; // 5件以上は非表示 if (i > 5) { $(this).hide(); } // 不一致 } 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をよく書いています。