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

$("#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 – 应用一些简单的亮点