使用w3.js搜索无结果时显示指定div的实现需求

我来帮你搞定这个需求！W3.js的filterHTML本身只会隐藏不匹配的元素，不会自动处理无结果的提示，所以我们只需要在每次搜索操作后添加一段检查逻辑，就能实现你要的效果。

完整修改后的代码 #

<input type="text" id="myInput" oninput="filterAndCheck()" placeholder="Search for names..">

<div id="myTable">
  <div>
    <p>Adele</p>
  </div>
  <div>
    <p>Agnes</p>
  </div>
  <div>
    <p>Billy</p>
  </div>
  <div>
    <p>Bob</p>
  </div>
  <!-- 这里可以继续添加更多条目 -->
</div>

<!-- 无结果提示框，默认隐藏 -->
<div id="noResult" style="display:none; margin-top: 12px; color: #666;">没有找到匹配的结果</div>

<script>
function filterAndCheck() {
  // 先执行W3.js的原生过滤逻辑
  w3.filterHTML('#myTable', 'p', document.getElementById('myInput').value);
  
  // 获取#myTable下所有未被隐藏的子div（W3.js会给不匹配元素加display:none）
  const visibleItems = document.querySelectorAll('#myTable > div:not([style*="display:none"])');
  
  // 获取提示元素
  const noResultElement = document.getElementById('noResult');
  
  // 根据可见元素数量控制提示框的显示/隐藏
  if (visibleItems.length === 0) {
    noResultElement.style.display = 'block';
  } else {
    noResultElement.style.display = 'none';
  }
}
</script>

关键修改点说明 #

• 把原input的oninput事件从直接调用w3.filterHTML改成调用自定义的filterAndCheck函数，这样可以在过滤后执行检查逻辑
• 添加了一个默认隐藏的#noResult div，用来显示无匹配提示
• 在自定义函数里：
  1. 先执行原生的W3.js过滤
  2. 通过querySelectorAll筛选出#myTable下没有被隐藏的子元素
  3. 根据可见元素的数量，决定是否显示无结果提示

这个方案完全兼容你现有的W3.js功能，不需要修改原有的结构，只需要添加少量代码就能实现需求啦！

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