UnKnown UnKnown - 1 month ago 16
HTML Question

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

I have a number of divs that are listed and I want to be able to add an input field that will allow a user to start typing and the divs are filtered accordinly

I'm trying the code below, but it's not filtering. It's not throwing up any errors either, so I'm not sure what to do at this point...

Here's the html markup:

<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

Try using :contains selector to get the label that has the value from the input field

Do the following:

   $(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();
        })
});

demo:http://jsfiddle.net/e08o7uct/3/