Jquery check if children contain text

Question

I am trying to build a small searchfilter based on a simple input-field. The jquery method should fadeOut all the rows of my table which do not contain the "name" I am searching for.

I know that :contains checks for text within the selected element, but somehow this seems not to work for all children of the element.

Is there a way to solve this problem without using .each() loops through all the children?

JSFiddle: http://jsfiddle.net/Q6sHG/

HTML

<input id="searchBar" type="text" class="form-control">

<table class="table table-hover">
    <thead>
        <tr>
            <th>Surname</th>
            <th>First name</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <td>Doe</td>
           <td>John</td>
       </tr>
       <tr>
           <td>Smith</td>
           <td>John</td>
       </tr>
       <tr>
           <td>Johnson</td>
           <td>Ann</td>
       </tr>
       [...]
    </tbody>
</table>

JQuery

$('#searchBar').keyup(function(){
        var name = $(this).val();
        if(name === "") {
            $( 'tbody>tr' ).fadeIn();
        } else {
            console.log("Search for: "+name);
            $( 'tbody>tr:contains( name )' ).fadeIn();
            $( 'tbody>tr:not(:contains( name ))').fadeOut();
        }
    });

Answer 1

You aren't filtering on the variable. Try the following instead

$( 'tbody>tr:contains('+name+')' ).fadeIn();
$( 'tbody>tr:not(:contains('+name+'))').fadeOut();

JSFiddle