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

前端之家收集整理的这篇文章主要介绍了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 – 应用一些简单的亮点

原文链接:https://www.f2er.com/jquery/182618.html

猜你在找的jQuery相关文章