当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现搜索过滤无结果提示方法

JS实现搜索过滤无结果提示方法

2025-12-14 13:24:49 0浏览收藏

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JS实现搜索过滤器无结果提示功能》，涉及到，有需要的可以收藏一下

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

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

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

1. HTML结构准备

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

注意： 我们为提示信息

元素添加了 id="mensaje" 和 class="hidden"，以便通过JavaScript和CSS进行控制。

2. CSS优化与隐藏策略

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

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

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

3. JavaScript核心逻辑实现

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

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：