Как скрыть/показать таблицу div, действующую на вход фильтра keyup

Question

У меня есть несколько разделов, которые перечислены, и я хочу, чтобы было возможность добавить поле ввода, которое позволит пользователю начать вводить текст, а divs отфильтровываются соответственно

Я пробую код ниже, но он не фильтрует. Это не бросали ошибки либо, так что я не уверен, что делать в этой точке ...

Вот 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/