var jSearch = (function (){ // Item List var input = $('input'); var items = $('.item'); // Search Listener input.keyup(function() { // Performance Monitor 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; } // Performance Monitor var t1 = performance.now(); console.log("Call to doSomething took " + (t1 - t0) + " milliseconds."); }); })();
<main> <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>