jquery - 通过表格行进行实时搜索

Question

我想使用 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>

如果我愿意的话。通过唯一 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>

如果你们能给我一些关于如何做这样的事情的提示，我将非常感激。

谢谢。

Answer 1

我不确定这有多有效，但这是有效的:

$("#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 - 表格上的实时搜索

<小时/>

我确实添加了一些简单的突出显示逻辑，您或 future 的用户可能会觉得很方便。

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

// 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 - 应用一些简单的突出显示

<小时/>