扩展 jQuery 表格搜索脚本答案

【问题标题】：Extend jQuery table search script扩展 jQuery 表格搜索脚本
【发布时间】：2018-05-22 13:32:32
【问题描述】：

我有一个来自 jQuery scripts 的 jQuery 表格搜索脚本，现在我想扩展它以在未找到结果时在 <p> 标记中显示一条消息。

脚本如下：

$('#searchInput').on('change, input', function() {
    selectOptionFilterVehicle();
    var searchTerm = $(this).val().toLowerCase().trim();
    $('#vehicleTable tbody tr').each(function() {
        var lineStr = $(this).text().toLowerCase();
        if (lineStr.indexOf(searchTerm) === -1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

我以为我可以在 if 语句中添加一个简单的 $('#noVhicle').html('Nothing found'); 和 $('#noVhicle').hide(); 但失败了。

现在我有点迷茫，谁能给我解释一下？

【问题讨论】：

标签： jquery search

【解决方案1】：

要处理已创建的项目，您需要创建变量并在发现某些内容时增加它，否则您会显示错误

$('#searchInput').on('change, input', function() {
    // selectOptionFilterVehicle();
    var founded = 0;
    var searchTerm = $(this).val().toLowerCase().trim();

    $('#vehicleTable tbody tr').each(function() {
        var lineStr = $(this).text().toLowerCase();
        if (lineStr.indexOf(searchTerm) === -1) {
            $(this).hide();
        } else {
            $(this).show();
            founded += 1;
        }
        if ( founded === 0 ) {
            $("#noVhicle").show();
        } else {
            $("#noVhicle").hide();
        }
    });
});

Here is the fiddle

【讨论】：