通过表行实时搜索 [英] Live search through table rows

问题描述

我想使用jQuery在表行中进行实时搜索，实时"一词是关键，因为我想在同一站点的文本输入中键入关键字，并且我希望jQuery自动对表格行进行排序(或删除与搜索查询不匹配的内容).

I want to do a live search through the table rows, using jQuery, the "live" word is the key, because I want to type the keywords in the text input, on the same site and I'd like jQuery to automaticaly sort (or remove those who doesn't match the search query) the table rows.

这是我的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>

如果我愿意.通过Unique ID搜索，它应该只显示从特定编号开始的唯一ID的行.铁如果我要在搜索输入框中输入"2"，则应保留以下行，因为它们以2开头:

And if I would fe. search by the Unique ID, it should show the only rows that starts from the certain number for the Unique ID. Fe. if I would type '2' in the search input box, the following rows should stay, as they begin with 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开始的行应该只有一行可见:

If I would type 24, then there should be only one row visible as it begins from the 24:

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

如果你们能给我一些如何做这样的提示，我将非常感谢.

If you guys could give me some tips on how to do something like this I would appreciate it so much.

谢谢.

推荐答案

我不确定这有多有效，但这行得通:

I'm not sure how efficient this is but this works:

$("#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 - Live search on table

---

I did add some simplistic highlighting logic which you or future users might find handy.

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

One of the ways to add some basic highlighting is to wrap em tags around the matched text and using CSS apply a yellow background to the matched text i.e: (em{ background-color: yellow }), similar to this:

// 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 - applying some simple highlighting

这篇关于通过表行实时搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！