jQuery表格搜索功能清空输入后无法恢复显示所有表格行问题求助

问题根因 #

• 清空输入时的选择器上下文错误：代码中清空输入分支的$("tbody > tr", this)语句里，this指向你绑定事件的搜索输入框元素，无法在输入框内选中表格行，所以这段代码没有实际生效，之前被隐藏的行和表格都不会恢复显示。
• 搜索无匹配结果时会隐藏整个.customize表格，清空搜索时没有额外恢复这些被隐藏的表格。

修复方案 #

把你代码中else分支的逻辑替换为如下内容即可：

else {
    // 恢复显示所有被隐藏的表格
    $(".customize").show();
    // 恢复显示所有表格的所有行
    $(".customize tbody > tr").show();
}

修复后的完整JS代码如下：

$("#search").keyup(function() { // search function
    var txtVal = $(this).val();
    if (txtVal != "") {
        $(".customize").show();
       // $(".message").remove();
        $.each($('.customize'), function (i, o) {
            var match = $("td:contains-ci('" + txtVal + "')", this);
            match.parent().siblings().hide();
            if (match.length > 0) $(match).parent("tr").show();
            else $(this).hide();
        });
    } else {
        // 清空输入时恢复所有内容显示
        $(".customize").show();
        $(".customize tbody > tr").show();
    }
    /*if($('.customize:visible').length == 0)
    {
        $('#search').after('<p class="message">Not found</p>');
    }*/
});

// 不区分大小写匹配扩展
$.extend($.expr[":"], {
    "contains-ci": function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

可选优化（避免搜索时的显示异常） #

你可以在遍历每个表格做匹配前，先把当前表格的所有行重置为显示状态，避免上一次搜索的隐藏状态干扰本次搜索结果，修改后的遍历逻辑如下：

$.each($('.customize'), function (i, o) {
    // 先重置当前表格所有行的显示状态
    $("tbody > tr", this).show();
    var match = $("td:contains-ci('" + txtVal + "')", this);
    match.parent().siblings().hide();
    if (match.length > 0) $(match).parent("tr").show();
    else $(this).hide();
});

内容的提问来源于stack exchange，提问作者Pfannkuchen