Search in multiple columns using contains selectors

Question

i am creating a search where user can search in multiple columns.

I achieved doing search for single columns using jQuery :contains , but not getting how to do multiple column search?

CODE:

<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
  <th>Name</th>
  <th>Number</th>
</tr>
<tr>
  <td>
    <input type="text" onkeyup="search('name', this.value);" />
  </td>
  <td>
    <input type="text" onkeyup="search('number', this.value);" />
  </td>
</tr>
<tr>
  <td class="search_name">abcd</td>
  <td class="search_number">12345</td>
</tr>
<tr>
  <td class="search_name">abcd</td>
  <td class="search_number">67890</td>
</tr>
<tr>
  <td class="search_name">ijkl</td>
  <td class="search_number">00000</td>
</tr>
<tr>
  <td class="search_name">mnop</td>
  <td class="search_number">00000</td>
</tr>
</table>

Java Script Code Here :

function search(field, val) {
      if (val.length > 1) {
        $('.search_name').parent('tr').hide();
        $.expr[":"].contains = $.expr.createPseudo(function(arg) {
          return function(elem) {
            return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
          };
        });
        if (field == 'name') {
          $('.search_name:contains(' + val + ')').parent('tr').show();
        }
        if (field == 'number') {
          $('.search_number:contains(' + val + ')').parent('tr').show();
        }
      } else {
        $('.search_name').parent('tr').show();
      }
    }

From the above code it searches for single column at a time but i want search word in name abcd with number 12345 , so than it shows only 1 row which matches both the keywords.

DEMO PLUNKER

Answer 1

Try This

    <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <table border="1" cellpadding="10">
            <tr style="background:#428bca; color:#fff;">
                <th>Name</th>
                <th>Number</th>
            </tr>
            <tr>
                <td>
                    <input id="searchName" type="text" onkeyup="search();" />
                </td>
                <td>
                    <input id="searchNumber" type="text" onkeyup="search();" />
                </td>
            </tr>
            <tr class="data">
                <td class="search_name">abcd</td>
                <td class="search_number">12345</td>
            </tr>
            <tr class="data">
                <td class="search_name">abcd</td>
                <td class="search_number">67890</td>
            </tr>
            <tr class="data">
                <td class="search_name">ijkl</td>
                <td class="search_number">00000</td>
            </tr>
            <tr class="data">
                <td class="search_name">mnop</td>
                <td class="search_number">00000</td>
            </tr>
        </table>

        <script>
            function search() {
                var searchName = $("#searchName").val() || '';
                var searchNumber = $("#searchNumber").val() || '';

                if (searchName == '' && searchNumber == '') {
                    $('tr.data').show();
                }
                else {
                    $('tr.data').hide();
                    if (searchName != '' && searchNumber != '') {
                        var eleSearchName = $(".search_name:contains(" + searchName + ")");
                        if (eleSearchName.length > 0) {
                            $.each(eleSearchName, function () {
                                if ($(this).next("td.search_number:contains(" + searchNumber + ")").length > 0)
                                    $(this).parent('tr').show();
                            });
                        }
                    }
                    else if (searchName != '') {
                        $('.search_name:contains(' + searchName + ')').parent('tr').show();
                    }
                    else if (searchNumber != '') {
                        $('.search_number:contains(' + searchNumber + ')').parent('tr').show();
                    }
                    else {
                        $('tr.data').show();
                    }
                }
            }
        </script>
    </body>
    </html>

UPDATE: Try this Generic Code upto N number of columns :)

    <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <table border="1" cellpadding="10">
            <tr style="background:#428bca; color:#fff;">
                <th>Name</th>
                <th>Number</th>
            </tr>
            <tr>
                <td>
                    <input class="searchbox" data-class="search_name" type="text" />
                </td>
                <td>
                    <input class="searchbox" data-class="search_number" type="text" />
                </td>
            </tr>
            <tr class="data">
                <td class="search_name">abcd</td>
                <td class="search_number">12345</td>
            </tr>
            <tr class="data">
                <td class="search_name">abcd</td>
                <td class="search_number">67890</td>
            </tr>
            <tr class="data">
                <td class="search_name">ijkl</td>
                <td class="search_number">00000</td>
            </tr>
            <tr class="data">
                <td class="search_name">mnop</td>
                <td class="search_number">00000</td>
            </tr>
        </table>

        <script>
            $(".searchbox").on('keyup', function () {
                if ($(this).val() != '') {
                    search(this);
                }
                else {
                    $(".data").show();
                    $.each($(".searchbox"), function () {
                        if ($(this).val() != '') {
                            $(this).keyup();
                        }
                    });
                }
            });

            function search(ele) {
                var val = $(ele).val() || '';
                if (val == '')
                    return;

                var dataclass = $(ele).attr('data-class');
                var SearchInText = '';
                $.each($(".data:visible"), function () {
                    SearchInText = $(this).find("td." + dataclass).text();
                    if (SearchInText.indexOf(val) == -1)
                        $(this).hide();
                });
            }
        </script>
    </body>
    </html>

Search in multiple columns using contains selectors

Question

1 answers

solution1
1 2014-07-08 05:33:16

Try This

UPDATE: Try this Generic Code upto N number of columns :)

Search in multiple columns using contains selectors

Question

1 answers

solution1 1 2014-07-08 05:33:16

Try This

UPDATE: Try this Generic Code upto N number of columns :)

solution1
1 2014-07-08 05:33:16