通过表格行实时搜索 [英] 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 - 桌面实时搜索

---

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

---

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