2016年11月27日(日)

リスト内で指定したキーワードにマッチする項目だけハイライトする

• 0
• 7
• 6
• 19

Result

input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。

jQuery

var jSearch = (function (){ // 対象のセレクタ var input = $('input'); var items = $('.item'); // 検索部分 input.keyup(function() { // パフォーマンスAPI 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 doS...