キーアップでのデータ値の検索

Question

私は入力している間、特定のテキスト（データ値=「特定のテキスト」）を持つ要素を表示する必要があります。私はいくつかの方法を試しましたが、何も動作していないようです。 ここまで私がこれまで持っていたことがあります。

$(".search").keyup(function() { 

    var filter = $(this).val(), count = 0; 
    $(".element-holder .element").each(function() { 

     var current = $('.element').attr('data-name'); 
     if ($(".element[data-name='" + current + "']").text().search(new RegExp(filter, "i")) < 0) { 
      $(this).fadeOut(); 
     } else { 
      $(this).show(); 
      count++; 
     } 
    }); 

}); 

これは私が助けを必要とするものであり、L

@Edit

HTMLあなたのhtmlの間違いのここ

  <div class="element-holder "> 
         <div class="element" data-name='Adam' id='1'> 
         </div> 
         <div class="element" data-name='Eva' id='32'> 
         </div> 
         <div class="element" data-name='Sara' id='412'> 
         </div> 
      </div> 

Answer 1

01未満にしてみてください

$(".search").keyup(function() { 
 

 
     var filter = $(this).val(), count = 0; 
 
     $(".element-holder .element").each(function() { 
 

 
      var current = $('.element').attr('data-name'); 
 
      if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
 
       $(this).fadeOut(); 
 
      } else { 
 
       $(this).show(); 
 
       count++; 
 
      } 
 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="search"/> 
 
<div class="element-holder "> 
 
<div class="element" data-name='Adam' id='1'>How to Format 
 
</div> 
 
<div class="element" data-name='Eva' id='32'>How to Edit 
 
</div> 
 
<div class="element" data-name='Sara' id='412'>Searching throught data-value on keyup 
 
</div> 
 
</div>

Answer 2

ロット。

要素クラスのスペルミスが使用されました。

検索入力のHTMLは表示されませんでした。

異なるデータ属性名。

あなたはそれぞれを使用している場合は、現在の要素を選択する$(this)の使用

チェックアウト私の下のデモ

$(".search").keyup(function() { 

    var entered = $(this).val(); 

    $(".elemnet").each(function() { 
     var text = $(this).html(); 

     if(entered !="") 
     { 
      if(text.indexOf(entered) > -1) 
      { 

      $(this).show(); 
      }else 
      { 

      $(this).hide(); 
      } 
     }else{ 

      $(".elemnet").hide(); 
     } 
    }); 

}); 

Working Demo

Demo using data attribute

Answer 3

01を作ります
1. keyupのDOM全体を検索すると、パフォーマンスが大幅に低下します。 キャッシュ検索結果
2. スロットルユーザーが
3. 再あなたのループ内でそれを複数回作成する代わりに、再あなたの正規表現を使用して入力して一時停止したときにのみフィルタを発射するあなたのkeyupイベント

`` `

// Cache your elements before hand 
var namedElements = $(".element-holder .element"); 

// inside your throttled keyup event handler 
// Check for empty strings 
var filter = (this.value || "").trim(), 
    regex = new RegExp(filter, 'i'); 

var toShow = namedElements.filter(function(index, element) { 
    var dataName = element.data("name"); 
    return regex.test(dataName); 
}); 
toShow.show(); 

var toHide = namedElements.filter(function(index, element) { 
    var dataName = element.data("name"); 
    return !regex.test(dataName); 
}); 
toHide.hide(); 

`` `