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

【问题标题】：Search in multiple columns using contains selectors使用包含选择器在多列中搜索
【发布时间】：2014-08-28 17:12:57
【问题描述】：

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

我使用 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 脚本代码：

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 行同时匹配两个关键字。

DEMO PLUNKER

【问题讨论】：

对不起，我不明白你的目标。输入这些搜索词已经让您进入 1 行。您是否希望它们出现在单个搜索条目字段中？
@SMcCrohan 请检查我的插件，在第一个 txtbox 中写 abcd 它会显示 2 个结果，然后如果你在第二个 txtbox 中写 12345 它应该只显示 1 个结果
啊！实际上，我确实得到了你想要的结果（它减少到 1 行），但这仅仅是因为你选择的数据。如果您将 ijl 行更改为也将 12345 作为其编号，那么您可以看到它已损坏。
看看jsfiddle.net/L8LEp

标签： javascript jquery html contains

【解决方案1】：

试试这个

    <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>

更新：试试这个通用代码最多 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>

【讨论】：