使用原生J*aScript实现动态搜索过滤及无结果提示

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用原生J*aScript实现动态搜索过滤及无结果提示

2025-12-03

浏览次数：次

返回列表

使用原生JavaScript实现动态搜索过滤及无结果提示

本教程详细介绍了如何使用原生j*ascript构建一个动态搜索过滤器，并在此基础上增加一个“无匹配项”提示功能。文章将通过优化dom操作、css样式（特别是`display: none`的使用），以及清晰的j*ascript逻辑，指导开发者实现一个用户友好的搜索体验，确保在搜索结果为空时能及时向用户反馈。

在现代Web应用中，搜索过滤功能是提升用户体验的关键一环。当用户输入查询词时，实时显示匹配结果并隐藏不匹配项，是基础功能。然而，当没有任何结果匹配用户的搜索时，提供一个明确的“无匹配项”提示，能够显著改善用户交互。本教程将引导您逐步实现这一功能。

核心功能：基础搜索过滤实现

首先，我们构建一个基础的搜索过滤器。它包含一个搜索输入框和一系列可被过滤的卡片元素。

HTML 结构

我们的HTML结构包括一个搜索输入框 (.card-filter)、一个用于显示“无匹配项”的段落 (#mensaje)，以及一个包含多个卡片 (.card) 的容器。

<section id="seccion-diez" class="section">
  <h2 data-dark>Filtro de Búsqueda</h2>
  <input type="search" name="busqueda" placeholder="Buscar..." class="card-filter">
  <!-- 初始时隐藏，当无匹配项时显示 -->
  <p class="hidden" id="mensaje">Los resultados no coincinden con la busqueda</p>
  <article class="contenedor-cards">
    <figure class="card">
      @@##@@
      <figcaption>Naturaleza</figcaption>
    </figure>
    <figure class="card">
      @@##@@
      <figcaption>Random</figcaption>
    </figure>
    <figure class="card">
      @@##@@
      <figcaption>Tecnología</figcaption>
    </figure>
    <figure class="card">
      @@##@@
      <figcaption>Persona</figcaption>
    </figure>
    <figure class="card">
      @@##@@
      <figcaption>Animal</figcaption>
    </figure>
    <figure class="card">
      @@##@@
      <figcaption>Arquitectura</figcaption>
    </figure>
  </article>
</section>

CSS 样式

为了隐藏不匹配的卡片和“无匹配项”提示，我们定义一个 .hidden 类。关键在于使用 display: none; 而不是 visibility: hidden;，因为 display: none; 会将元素从文档流中完全移除，不占用任何空间，从而避免布局问题。

.hidden {
  display: none; /* 将元素从文档流中移除 */
  opacity: 0;    /* 配合过渡效果，虽然 display: none 会立即隐藏 */
  order: 1;      /* 可能用于 Flexbox/Grid 布局，将隐藏元素排序到末尾 */
}

J*aScript 过滤逻辑

J*aScript 代码将监听搜索输入框的 keyup 事件。每当用户输入时，它会遍历所有卡片，根据卡片文本内容是否包含搜索关键词来添加或移除 .hidden 类。

TapNow

新一代AI视觉创作引擎

407 查看详情 TapNow

const d = document;

export default function filtroBusqueda(inputSelector, cardSelector) {
  d.addEventListener("keyup", (e) => {
    // 确保事件源是目标输入框
    if (!e.target.matches(inputSelector)) return;

    // 按下 Escape 键时清空输入框
    if (e.key === "Escape") e.target.value = "";

    // 遍历所有卡片，根据搜索值显示或隐藏
    d.querySelectorAll(cardSelector).forEach((elemento) => {
      const isMatch = elemento.textContent.toLowerCase().includes(e.target.value.toLowerCase());
      if (isMatch) {
        elemento.classList.remove("hidden");
      } else {
        elemento.classList.add("hidden");
      }
    });

    // 这里将是添加“无匹配项”提示逻辑的地方
  });
}

// 在 DOM 加载完成后初始化过滤器
d.addEventListener("DOMContentLoaded", (e) => {
  filtroBusqueda(".card-filter", ".card");
});

增强功能：添加“无匹配项”提示

现在，我们来完善上述J*aScript代码，使其在没有搜索结果时显示提示信息。

J*aScript 逻辑更新

在卡片过滤逻辑之后，我们需要检查当前有多少卡片是可见的（即没有 .hidden 类）。根据这个数量，我们来决定是否显示 #mensaje 元素。

收集可见元素： 使用 querySelectorAll 结合 filter 方法，筛选出所有未被隐藏的卡片。
判断结果数量： 检查可见卡片数组的长度。
切换提示信息： 如果有可见卡片，则隐藏 #mensaje；如果没有可见卡片，则显示 #mensaje。

以下是完整的J*aScript代码，包含了这一增强功能：

const d = document;

export default function filtroBusqueda(inputSelector, cardSelector) {
  d.addEventListener("keyup", (e) => {
    // 确保事件源是目标输入框，使用早返回减少嵌套
    if (!e.target.matches(inputSelector)) return;

    // 按下 Escape 键时清空输入框
    if (e.key === "Escape") e.target.value = "";

    // 获取搜索输入框的值，并转换为小写以便进行不区分大小写的比较
    const searchValue = e.target.value.toLowerCase();

    // 遍历所有卡片，根据搜索值显示或隐藏
    d.querySelectorAll(cardSelector).forEach((elemento) => {
      // 将卡片的文本内容转换为小写进行比较
      const isMatch = elemento.textContent.toLowerCase().includes(searchValue);
      if (isMatch) {
        elemento.classList.remove("hidden");
      } else {
        elemento.classList.add("hidden");
      }
    });

    // 获取所有卡片，并过滤出当前可见（没有 'hidden' 类）的卡片
    const visibleCards = [...d.querySelectorAll(cardSelector)].filter(
      (elemento) => !elemento.classList.contains("hidden")
    );

    // 根据可见卡片的数量来显示或隐藏“无匹配项”消息
    const messageElement = d.querySelector("#mensaje");
    if (visibleCards.length > 0) {
      // 有可见卡片，隐藏消息
      messageElement.classList.add("hidden");
    } else {
      // 没有可见卡片，显示消息
      messageElement.classList.remove("hidden");
    }
  });
}

// 在 DOM 加载完成后初始化过滤器
d.addEventListener("DOMContentLoaded", (e) => {
  filtroBusqueda(".card-filter", ".card");
});

注意事项与最佳实践

display: none vs visibility: hidden: 如前所述，display: none 是隐藏元素并将其从文档流中移除的最佳选择，因为它不会占用空间，也不会影响页面布局。而 visibility: hidden 仅使元素不可见，但其仍会占用原有的空间。
早期返回 (Early Return): 在J*aScript函数中，使用 if (!condition) return; 这样的早期返回语句可以使代码更扁平、更易读，避免深层嵌套。
语义化类名: 使用如 hidden 这样的类名比 filter 更清晰地表达了其作用。
性能优化: 对于非常大量的DOM元素，频繁的 querySelectorAll 和 DOM 操作可能会影响性能。可以考虑对元素进行一次性获取，或者使用虚拟DOM库（如React, Vue）来优化。对于本例中的少量卡片，原生JS的性能是足够的。
可访问性 (Accessibility): 对于屏幕阅读器用户，当内容动态变化时，可以考虑使用ARIA属性（如 aria-live）来通知用户。

总结

通过本教程，您学会了如何使用原生J*aScript构建一个功能完善的搜索过滤器，并添加了用户友好的“无匹配项”提示。这包括了HTML结构的设置、CSS样式的优化（特别是 display: none 的应用），以及核心的J*aScript逻辑，用于根据搜索关键词动态显示或隐藏元素，并根据结果数量切换提示信息。掌握这些技术将帮助您创建更具交互性和用户体验的Web应用。