本教程将指导您如何利用原生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核心逻辑实现
核心逻辑在于监听搜索框的输入事件，根据输入内容过滤列表项，并在过滤完成后检查可见项的数量，从而决定是否显示“无匹配结果”提示。
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) 进行早期返回，避免在不相关的键盘事件上执行过滤逻辑。
- 用户体验： 提供清晰的“无匹配结果”提示，增强了搜索功能的可用性。
这种方法不仅适用于简单的卡片列表，也可以扩展到更复杂的过滤场景，为用户提供更直观、友好的交互体验。
