table multiple word search in jquery

Question

I have a jquery function that search a word in a table. e.g.

TABLE

<table>
   <tr>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Band Name</th>
   </tr>
   <tr>
       <td>John</td>
       <td>Lennon</td>
       <td>Beatles</td>
   </tr>
   <tr>
       <td>Paul</td>
       <td>McCartney</td>
       <td>Beatles</td>
   </tr>
   <tr>
       <td>George</td>
       <td>Harrison</td>
       <td>Beatles</td>
   </tr>
       <tr>
       <td>Ringo</td>
       <td>Starr</td>
       <td>Beatles</td>
   </tr>

now. i have an input text box that if you put any word in there based on the table e.g Paul the result will be a table that has only paul mccartney . and all the other td elements will be hidden.

$(document).ready(function(){
            if (!RegExp.escape) {
                RegExp.escape = function (s) {
                    return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
                };
            }
            ///search this table
            jQuery(function ($) {
                ///search this table
                $(' #search ').click(function () {
                    var searchthis = new RegExp($(' #emp_search ').val().replace(/\s+/, '|'), 'i');
                    $("table").find("tr").slice(1).each(function (index) {
                        var text = $.trim($(this).text());
                        $(this).toggle(searchthis.test(text));
                    });

Now, what i want to happen is.. what if i input a text containg "Paul Harrison", the result should be paul mccartney and george harrison.. is that possible? like inputting a multiple words and displaying a possible result? Im just new in jquery. and the codes above is not mine.. thanks in advance. :)

here is the demo http://jsfiddle.net/wind_chime18/D6nzC/7/

Answer 1

I think a regex based search will be the best fit for this

if (!RegExp.escape) {
    RegExp.escape = function (s) {
        return s.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

jQuery(function ($) {
    var $table = $("table");
    var bands = [];
    $table.find('td:nth-child(3)').each(function () {
        var text = $.trim($(this).text()).toLowerCase();
        if ($.inArray(text, bands) == -1) {
            bands.push(text);
        }
    }).get();

    ///search this table
    $(' #search ').click(function () {
        var parts = $(' #emp_search ').val().split(/\s+/);

        var bns = [],
            i = 0,
            idx;
        while (i < parts.length) {
            idx = $.inArray(parts[i].toLowerCase(), bands);
            if (idx >= 0) {
                bns.push(parts.splice(i, 1)[0]);
            } else {
                i++;
            }
        }

        var nameexp = parts.length ? new RegExp(parts.join('|'), 'im') : false;
        var bnexp = bns.length ? new RegExp(bns.join('|'), 'im') : false;

        $("table").find("tr").slice(1).each(function (index) {
            var $this = $(this);
            var name = $.trim($this.children().not(':nth-child(3)').text());
            var band = $.trim($this.children(':nth-child(3)').text());
            $(this).toggle((!nameexp || nameexp.test(name)) && (!bnexp || bnexp.test(band)));
        });
    });
});

Demo: Fiddle

Answer 2

You could first collapse all the rows, then split the searchthis string on space and finally add visible to rows that match one of the rows... something like this for example.

$(document).ready(function(){
    ///search this table
    $('#search').click(function() {
        var searchthis = $('#emp_search').val();
        $("table").find("tr").each(function(index) {
            if (index === 0) return;
            $(this).css('visibility', 'collapse');
        });
        var searchArray = [searchthis];
        if (searchthis.indexOf(' ') > -1) {
            searchArray = searchthis.split(' ');
        }
        $("table").find("tr").each(function(index) {
            if (index === 0) return;
            var id = $(this).find("td").text().toLowerCase().trim();
            for (var i = 0; i < searchArray.length; i++) {
                var txt = searchArray[i].toLowerCase().trim();
                if (id.indexOf(txt) !== -1) {
                    $(this).css('visibility', 'visible');
                }
            }
        });
    });
});