キーアップフィルタ入力に作用するテーブルdivを非表示/表示する方法

Question

表示されているdivの数が多いため、ユーザーが入力を開始しdivをフィルタリングする入力フィールドを追加できるようにしたい

私は以下のコードを試していますが、フィルタリングされていません。それは、どちらかのすべてのエラーを投げていないので、私はこの時点で何をすべきかわからないんだけど...

ここでは、HTMLマークアップです：

<table class="table" id="tagstable"> 
    <tbody> 
     <tr> 
     <td><label data-tagid="1" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">hotel tag<span></span></label></td> 
     <td><label data-tagid="2" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">yoga tag<span></span></label></td> 
     <td><label data-tagid="3" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">jogging tag<span></span></label></td> 
     <td><label data-tagid="4" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">exercise tag<span></span></label></td> 
     </tr> 
     <tr> 
     <td><label data-tagid="5" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">aerobic tag<span></span></label></td> 
     <td><label data-tagid="6" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">running tag<span></span></label></td> 
     <td><label data-tagid="23" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">Body Building<span></span></label></td> 
     <td><label data-tagid="24" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">BB<span></span></label></td> 
     </tr> 
     <tr> 
     <td><label data-tagid="25" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">one<span></span></label></td> 
     <td><label data-tagid="26" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">two<span></span></label></td> 
     <td><label data-tagid="27" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">three<span></span></label></td> 
     <td><label data-tagid="28" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">four<span></span></label></td> 
     </tr> 
     <tr> 
     <td><label data-tagid="29" class="mt-checkbox mt-checkbox-outline"><input type="checkbox" class="chkclass">five<span></span></label></td> 
     </tr> 
    </tbody> 
</table> 

<input id="filter" type="text" class="form-control" placeholder="Type here..."> 

$(document).ready(function(){ 
    $('#filter').keyup(function(){ 
     var tr = $('#tagstable tbody tr'); 
     tr.hide(); 
     tr.filter(function(){ 
      return $(this).text(); 
     }).show(); 
    }) 
}); 

http://jsfiddle.net/cod7ceho/155/

Answer 1

は:containsを使用してみてくださいセレクタを使用して入力フィールドの値を持つラベルを取得する

$(document).ready(function() 
{ 
     $('#filter').keyup(function() 
     { 
     var val = this.value; 
       var tr = $('#tagstable tbody td'); 
       el = tr.find('label:contains('+val+')').closest('td') 
       tr.not(el).fadeOut(); 
       el.fadeIn(); 
     }) 
}); 

デモ：http://jsfiddle.net/e08o7uct/3/