使用原生JavaScript为搜索过滤器添加“无匹配结果”提示

本教程将指导您如何利用原生javascript，为一个基础搜索过滤器实现动态的“无匹配结果”提示功能。通过优化css隐藏策略（从`visibility: hidden`改为`display: none`）并引入javascript逻辑来判断过滤后的可见元素数量，我们能精确控制提示信息的显示与隐藏，从而提升用户体验，确保当搜索结果为空时，用户能收到明确的反馈。

在构建基于原生JavaScript的搜索过滤器时，一个常见的需求是在没有匹配结果时向用户显示一条提示信息。这不仅能优化用户体验，还能清晰地告知用户当前搜索状态。本教程将详细介绍如何实现这一功能，包括HTML结构、CSS优化以及核心JavaScript逻辑。

1. HTML结构准备

首先，我们需要在HTML中定义搜索输入框、待过滤的列表项，以及用于显示“无匹配结果”的提示信息元素。提示信息默认应处于隐藏状态。

<section id="seccion-diez" class="section">
    <h2 data-dark>搜索过滤器</h2>
    <input type="search" name="busqueda" placeholder="搜索..." class="card-filter">
    <!-- 无匹配结果提示信息，初始时带有 'hidden' 类 -->
    <p class="hidden" id="mensaje">无匹配结果</p>
    <article class="contenedor-cards">
        <figure class="card">
            <img src="https://placeimg.com/200/200/nature" alt="nature">
            <figcaption>自然风光</figcaption>
        </figure>
        <figure class="card">
            <img src="https://placeimg.com/200/200/any" alt="any">
            <figcaption>随机</figcaption>
        </figure>
        <figure class="card">
            <img src="https://placeimg.com/200/200/tech" alt="tech">
            <figcaption>科技</figcaption>
        </figure>
        <figure class="card">
            <img src="https://placeimg.com/200/200/people" alt="people">
            <figcaption>人物</figcaption>
        </figure>
        <figure class="card">
            <img src="https://placeimg.com/200/200/animals" alt="animals">
            <figcaption>动物</figcaption>
        </figure>
        <figure class="card">
            <img src="https://placeimg.com/200/200/arch" alt="arch">
            <figcaption>建筑</figcaption>
        </figure>
    </article>
</section>

注意： 我们为提示信息 <p> 元素添加了 id="mensaje" 和 class="hidden"，以便通过JavaScript和CSS进行控制。

2. CSS优化与隐藏策略

为了确保被隐藏的元素不占用页面布局空间，我们推荐使用 display: none; 而不是 visibility: hidden;。visibility: hidden; 会使元素不可见但仍占据其原始空间，而 display: none; 则会将其完全从文档流中移除。

立即学习“Java免费学习笔记（深入）”；

.hidden {
  display: none; /* 彻底隐藏元素，不占据空间 */
  opacity: 0;    /* 配合过渡效果，确保平滑隐藏 */
  order: 1;      /* 如果使用Flexbox或Grid，可用于排序 */
}

我们将原本的 .filter 类名替换为更具语义化的 .hidden，并将其 visibility: hidden; 属性改为 display: none;。

3. JavaScript核心逻辑实现

核心逻辑在于监听搜索框的输入事件，根据输入内容过滤列表项，并在过滤完成后检查可见项的数量，从而决定是否显示“无匹配结果”提示。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

下载

const d = document;

/**
 * 实现搜索过滤功能，并在无匹配结果时显示提示信息。
 * @param {string} input - 搜索输入框的选择器。
 * @param {string} selector - 待过滤列表项的选择器。
 */
export default function filtroBusqueda(input, selector) {
  d.addEventListener("keyup", (e) => {
    // 1. 检查事件源是否为目标搜索框，如果不是则提前返回
    if (!e.target.matches(input)) return;

    // 2. 如果按下的是Escape键，清空搜索框
    if (e.key === "Escape") e.target.value = "";

    // 3. 遍历所有列表项进行过滤
    d.querySelectorAll(selector).forEach((elemento) => {
      // 将元素文本内容转为小写，与搜索框值进行比较
      const match = elemento.textContent.toLowerCase().includes(e.target.value.toLowerCase());

      // 根据匹配结果添加或移除 'hidden' 类
      if (match) {
        elemento.classList.remove("hidden"); // 匹配成功，显示元素
      } else {
        elemento.classList.add("hidden");    // 匹配失败，隐藏元素
      }
    });

    // 4. 判断并显示/隐藏“无匹配结果”提示
    // 获取所有卡片元素中当前未被隐藏（即可见）的元素
    const visibleResults = [...d.querySelectorAll(".card")].filter(
      (elemento) => !elemento.classList.contains("hidden")
    );

    const mensajeElement = d.querySelector("#mensaje"); // 获取提示信息元素

    if (visibleResults.length) {
      // 如果有可见结果，则隐藏提示信息
      mensajeElement.classList.add("hidden");
    } else {
      // 如果没有可见结果，则显示提示信息
      mensajeElement.classList.remove("hidden");
    }
  });
}

代码解析：

• 事件监听与提前返回： d.addEventListener("keyup", ...) 监听键盘抬起事件。if (!e.target.matches(input)) return; 是一个重要的优化，它确保只有当事件源是搜索输入框时才执行后续逻辑，避免不必要的计算。
• 清空搜索框： if (e.key === "Escape") e.target.value = ""; 允许用户通过按下 Escape 键快速清空搜索框内容。
• 元素过滤： d.querySelectorAll(selector).forEach(...) 遍历所有待过滤的卡片元素。通过比较元素的 textContent 和搜索框的值（都转换为小写以实现不区分大小写的搜索），来决定是移除还是添加 hidden 类。
• 判断无匹配结果：
  • [...d.querySelectorAll(".card")] 将所有卡片元素转换为数组。
  • .filter((elemento) => !elemento.classList.contains("hidden")) 筛选出那些不包含 hidden 类的元素，即当前可见的元素。
  • visibleResults.length 用于判断可见元素的数量。如果数量大于0，说明有匹配结果，则隐藏“无匹配结果”提示 (mensajeElement.classList.add("hidden"))；否则，显示提示 (mensajeElement.classList.remove("hidden"))。

4. 整合与调用

在你的主JavaScript文件（例如 index.js）中，确保在DOM加载完成后调用 filtroBusqueda 函数。

// index.js
import filtroBusqueda from './filtro_de_busqueda.js'; // 假设你的过滤函数在 filtro_de_busqueda.js 中

const d = document;

d.addEventListener('DOMContentLoaded', e => {
    // 调用过滤函数，传入搜索框和卡片的选择器
    filtroBusqueda('.card-filter', '.card');
});

确保你的HTML文件正确地以 type="module" 引入了 index.js：

<script type="module" src="./js/index.js" ></script>

5. 总结与最佳实践

通过上述步骤，我们成功地为原生JavaScript搜索过滤器添加了“无匹配结果”提示功能。在实现过程中，我们遵循了以下最佳实践：

• 语义化类名： 使用 hidden 而不是 filter 更清晰地表达了类的作用。
• 正确的隐藏方式： 优先使用 display: none; 来彻底隐藏元素并移除其布局空间。
• 性能优化： 使用 e.target.matches(input) 进行早期返回，避免在不相关的键盘事件上执行过滤逻辑。
• 用户体验： 提供清晰的“无匹配结果”提示，增强了搜索功能的可用性。

这种方法不仅适用于简单的卡片列表，也可以扩展到更复杂的过滤场景，为用户提供更直观、友好的交互体验。