jquery – 通过表行进行实时搜索

我想通过表行进行实时搜索，使用jQuery，“活”字是关键，因为我想在文本输入中键入关键字，在同一个网站上，我希望jQuery自动排序(或删除那些与搜索查询不符的列表)行。

这是我的HTML：

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>1252512</td><td>556</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>3245466</td><td>334</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

如果我会fe按唯一ID搜索，它应该显示唯一的行从唯一ID的特定数字开始。铁。如果我在搜索输入框中输入’2’，则应该保留以下行，因为它们以2：

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

如果我输入24，那么应该只有一行可见，从24开始：

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

如果你们可以给我一些关于如何做这样的事情的技巧，我将非常感激。

谢谢。

解决方法

我不知道这是多么有效，但这是有效的：

$("#search").on("keyup",function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index != 0) {

            $row = $(this);

            var id = $row.find("td:first").text();

            if (id.indexOf(value) != 0) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        }
    });
});​

DEMO – 在桌上实时搜索

我添加了一些简单的突出显示逻辑，您或将来的用户可能会找到方便。

添加一些基本突出显示的方法之一是在匹配的文本周围包装em标签，并使用CSS将黄色背景应用于匹配的文本，即：(em {background-color：yellow})，类似于：

// removes highlighting by replacing each em tag within the specified elements with it's content
function removeHighlighting(highlightedElements){
    highlightedElements.each(function(){
        var element = $(this);
        element.replaceWith(element.html());
    })
}

// add highlighting by wrapping the matched text into an em tag,replacing the current elements,html value with it
function addHighlighting(element,textToHighlight){
    var text = element.text();
    var highlightedText = '<em>' + textToHighlight + '</em>';
    var newText = text.replace(textToHighlight,highlightedText);

    element.html(newText);
}

$("#search").on("keyup",function() {
    var value = $(this).val();

    // remove all highlighted text passing all em tags
    removeHighlighting($("table tr em"));

    $("table tr").each(function(index) {
        if (index !== 0) {
            $row = $(this);

            var $tdElement = $row.find("td:first");
            var id = $tdElement.text();
            var matchedindex = id.indexOf(value);

            if (matchedindex != 0) {
                $row.hide();
            }
            else {
                //highlight matching text,passing element and matched text
                addHighlighting($tdElement,value);
                $row.show();
            }
        }
    });
});

Demo – 应用一些简单的亮点