使用包含选择器在多个列中搜索

Search in multiple columns using contains selectors

本文关键字：搜索 包含 选择器      更新时间：2023-09-26

我正在创建一个搜索，用户可以在多个列中搜索。

我实现了做搜索单列使用jQuery :contains，但没有得到如何做多列搜索?

代码:

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

从上面的代码，它搜索单列一次，但我想搜索字在name abcd与number 12345，所以它只显示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 通用代码最多N列数:)

    <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>
相关文章：