Jquery filter table

Question

I found a jsfiddle by Nachito that nearly does what I want. The only difference is that I need to do this with a table instead of a list.

Here is Nachito's http://jsfiddle.net/nachito/QhL2M/24/

<form class="filterform" action="#">
  <input class="filterInput" type="text">
</form>

<ul id="list">
    <li>Australia</li>
    <li>hello hi bye goodbye</li>
    <li>hello|hi|bye|goodbye</li>
    <li>Belgium</li>
    <li>Brazil</li>
    <li>Canada Denmark hello</li>
    <li>Denmark</li>
</ul>


(function($) {

$('.filterInput').keyup(function() {
    var inputValue = $(this).val();
    if (inputValue.length > 2) {
        var inputWords = inputValue.toLowerCase().split(/[\s,]+/);
        var $matches = $('#list li').filter(function() {
            for (i in inputWords) {
                if ($.trim(inputWords[i]) == "") {
                    continue;
                }
                var r = new RegExp('\\b(' + inputWords[i] + ')(s|es|\'s)?\\b', 'i');
                if (r.test($(this).text())) {
                    return true;
                }
            }
            return false;
        });

        if ($matches.length) {
            $matches.slideDown(400);
            $('#list li').not($matches).slideUp();
        } else {
            $('#list li').slideDown();
        }
    } else {
        $('#list li').slideDown();
    }
    return false;
})

}(jQuery));

Here is my fork http://jsfiddle.net/sptrsn/d6anawnn/5/

<form class="filterform" action="#">
    <input class="filterInput" type="text">
</form>

<table id="list">
    <tr><td>Australia</td></tr>
    <tr><td>hello hi bye goodbye</td></tr>
    <tr><td>hello|hi|bye|goodbye</td></tr>
    <tr><td>Belgium</td></tr>
    <tr><td>Brazil</td></tr>
    <tr><td>Canada Denmark hello</td></tr>
    <tr><td>Denmark</td></tr>
</table>

(function($) {

$('.filterInput').keyup(function() {
    var inputValue = $(this).val();
    if (inputValue.length > 2) {
        var inputWords = inputValue.toLowerCase().split(/[\s,]+/);
        var $matches = $('table tr td').filter(function() {
            for (i in inputWords) {
                if ($.trim(inputWords[i]) == "") {
                    continue;
                }
                var r = new RegExp('\\b(' + inputWords[i] + ')(s|es|\'s)?\\b', 'i');
                if (r.test($(this).text())) {
                    return true;
                }
            }
            return false;
        });

        if ($matches.length) {
            $matches.slideDown(400);
            $('table tr').not($matches).slideUp();
        } else {
            $('table tr').slideDown();
        }
    } else {
        $('table tr').slideDown();
    }
    return false;
})

}(jQuery));

I changed the html to a simple table with one td element. In the js I changed the three jQuery selectors to 'tr td' instead of 'li'

At this point, it simply hides all the data.

The point of this... I want a simple filtering function that will subset the list of rows based on contained tags. I will need some additional td elements once I get this base function working, hence the desire to do this in a table.

Answer 1

 if ($matches.length) {
                $matches.slideDown(400);
                $('#list tr').children().not($matches).slideUp();
            } else {
                $('#list tr').children().slideDown();
            }
        } else {
            $('#list tr').slideDown();
        }
        return false;
    })

Updated fiddle: http://jsfiddle.net/d6anawnn/6/

Answer 2

dear you better use http://www.datatables.net/ its a jquery plugin with loads of options , it will save time and effort