Result
input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。
jQuery
var jSearch = (function (){
var input = $('input');
var items = $('.item');
input.keyup(function() {
var t0 = performance.now();
var input = $(this).val();
switch(true){
case input === '':
items.css('opacity', '1');
break;
default:
items.css('opacity', '0.2');
items.filter('[data-type*="' + input.toLowerCase() + '"]').css('opacity', '1');
break;
}
var t1 = performance.now();
console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
});
})();
|
html
<input style="margin-bottom:1em ;" placeholder="検索">
<ul>
<li class="item hide" data-type="田中花子">田中花子</li>
<li class="item hide" data-type="高橋花子">高橋花子</li>
<li class="item hide" data-type="佐藤花子">佐藤花子</li>
<li class="item hide" data-type="田中太郎">田中太郎</li>
<li class="item hide" data-type="高橋太郎">高橋太郎</li>
<li class="item hide" data-type="佐藤太郎">佐藤太郎</li>
<li class="item hide" data-type="田中たけし">田中たけし</li>
<li class="item hide" data-type="高橋たけし">高橋たけし</li>
<li class="item hide" data-type="佐藤たけし">佐藤たけし</li>
</ul>
|
via
jSearch
