客户端使用 jQuery 搜索表答案

【问题标题】：Client side searching of a table with jQuery客户端使用 jQuery 搜索表
【发布时间】：2012-09-08 04:02:46
【问题描述】：

假设我有一个标准的 HTML 表格结构，例如：

<table class="table table-striped table-hover table-bordered table-condensed">
<thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Added</th>
    </tr>
</thead>
<tbody>
    <tr id="1a0daa2734" class="item">
        <td><a href="/view/1a0daa2734">Item Number 1</a></td>
        <td>A</td>
        <td>8/1/2012 10:18:34 PM</td>
    </tr>
    <tr id="b1ff6e0ac" class="item">
        <td><a href="/view/b1ff6e0ac">Item Number 2</a></td>
        <td>B</td>
        <td>8/2/2012 5:48:54 PM</td>
    </tr>
    <tr id="edd8b70893" class="item">
        <td><a href="/view/edd8b70893">Item Number 3</a></td>
        <td>A</td>
        <td>8/13/2012 3:55:41 PM</td>
    </tr>
</tbody>
</table>

我正在尝试使用 jQuery 编写客户端搜索。基本上我有一个 id 为search-items 的搜索框。

    $("#search-items").bind("keyup paste", function() {
        var searchText = $("#search-items").val(); 

        $(".item").each(function() {
             //???
        });
    });

获取search-items 的搜索值并在tbody 内找到NON-MATCHES 的最佳方法是什么？我想要不匹配的，因为这些是我要隐藏的元素。

它应该只在前两个td 元素内搜索，所以name 和type 列，不添加。

谢谢。

【问题讨论】：

标签： javascript jquery html search

【解决方案1】：

以下代码将尝试将您键入的值匹配到 column1 或 2。

$("#search").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var $rows = $("table tr");

    if(value === ''){
        $rows.show();
        return false;
    }

    $rows.each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var column1 = $row.find("td:first a").html().toUpperCase();
            var column2 = $row.find("td").eq(1).text().toUpperCase();

            if ((column1.indexOf(value) > -1) || (column2.indexOf(value) > -1)) {
                $row.show();
            }
            else {
                $row.hide();
            }
        }
    });
});

DEMO - 分别按第 1 列和第 2 列值搜索表（未添加）

我确信有一种更有效的编写方式，但这应该可以帮助您入门。

【讨论】：

当你说I want the non-matches, because those are the elements I will hide. 我做了一点假设。如果不匹配，我发布的代码将隐藏完整的行，如果匹配则保持可见。但是，如果您希望首先返回结果，那只是一个小调整。或者，如果这根本不是您想要的，请告诉我，然后我会用所需的更改对其进行更新。
谢谢，但是你得从头开始搜索，应该可以在任何地方开始搜索，例如：搜索umb
@Justin：我更新了帖子中的小提琴和代码。搜索现在将匹配输入的值，而不仅仅是检查它是否以它开头。基本上与contains 相同，请参阅更新的小提琴，让我知道这是否更接近您的需要。目前搜索不区分大小写，但如果您希望它是一个小调整。
非常感谢。一件小事，有没有可能，而不是简单地显示和隐藏，我可以用 300 毫秒的时间做一个 slideUp 和 slideDown 效果吗？我试过了，但没有显示效果。可能是因为我们需要在完成后回调？
@Justin：我也无法让幻灯片工作。也许是因为它是<tr>，真的不确定。但是，我更新了小提琴以使用$row.show(500); 和$row.hide(500);。这将添加一些褪色动画。您还可以为样式创建 2 个类，然后使用 jQuery UI 的 switchClass() 来切换它们，应用一些基本的过渡动画。如果我以后有时间，我可能会fork小提琴给你看一个例子。

【解决方案2】：

这样的事情怎么样？

function escapeRegex(value) {
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
}

$(function() {
    $("#search-items").bind("keyup paste", function() {
        var searchText = $("#search-items").val(),
            regex = new RegExp(escapeRegex(searchText), "gi"),
            $items = $(".item").show();

        if (searchText) {
            $items.each(function() {
                var $tds = $("td", this).slice(0, 2), // only the first two columns
                    text = $tds.text();

                if (text.search(regex) === -1) {
                    $(this).hide();
                }

            });
        }
    });
});

示例： http://jsfiddle.net/Pc7Nk/1/

escapeRegex函数被jQueryUI autocomplete's source code.无耻盗用

【讨论】：

【解决方案3】：

逐行查找第一个 td（如果您愿意，也可以添加 n 个要匹配的 td 元素。.text() 将返回一个字符串，使用字符串对象 .search 方法，您就是返回第一个匹配的索引，如果没有匹配则返回-1，所以我们隐藏该行。

$("#search-items").bind("keyup paste", function() {
    var searchText = $("#search-items").val(); 

    $(".item").each(function() {
         var $this = $(this)
         if ($this.find('td:first-child').text().search(searchText) === -1) {
             $this.hide()
         }
    });
});

【讨论】：