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>
サンプル
