如何扩展jQuery表格搜索脚本实现无结果提示功能？

我获取了一段jQuery表格搜索脚本，想要扩展它，在没有搜索结果时用<p>标签（id为noVhicle）显示提示信息。现有脚本如下：

$('#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();但没有成功，想请教原因及解决方法。

你之前的尝试失效主要是两个逻辑细节没处理好：

1. 触发时机错误：你在每一行匹配失败隐藏时就设置提示，这会导致只要有一行不满足搜索条件就触发提示，但我们需要的是所有行都找不到匹配项时才显示提示，不是单一行。
2. 提示元素的显隐逻辑不完整：只处理了显示提示的场景，没覆盖"搜索有结果时隐藏提示"的反向操作，而且可能初始状态没把提示元素设为隐藏，导致页面加载时就显示着提示。

我们可以先统计搜索后仍显示的行数，再根据这个数量决定是否展示提示：

$('#searchInput').on('change, input', function() { 
  selectOptionFilterVehicle(); 
  var searchTerm = $(this).val().toLowerCase().trim(); 
  var visibleRowCount = 0; // 用来统计搜索后显示的行数

  $('#vehicleTable tbody tr').each(function() { 
    var lineStr = $(this).text().toLowerCase(); 
    if (lineStr.indexOf(searchTerm) === -1) { 
      $(this).hide(); 
    } else { 
      $(this).show(); 
      visibleRowCount++; // 每显示一行就计数+1
    } 
  }); 

  // 根据显示行数控制提示元素的显隐
  var $noVehicle = $('#noVhicle');
  if (visibleRowCount === 0) {
    $noVehicle.html('Nothing found').show();
  } else {
    $noVehicle.hide();
  }
});

额外注意事项： #

• 确保你的HTML里存在这个提示元素，并且初始状态隐藏：<p id="noVhicle" style="display: none;">Nothing found</p>
• 如果selectOptionFilterVehicle()函数也会修改表格行的显示状态，建议在统计visibleRowCount前，确保所有行的状态是基于当前搜索结果的

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