如何 Hide/show table div 作用于 keyup 过滤器输入

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/

如何 Hide/show table div 作用于 keyup 过滤器输入

How to Hide/show table div acting on keyup filter input

html

javascript

jquery

jquery-filter