本教程详细介绍了如何使用原生javascript构建一个动态搜索过滤器，并在此基础上增加一个“无匹配项”提示功能。文章将通过优化dom操作、css样式（特别是`display: none`的使用），以及清晰的javascript逻辑，指导开发者实现一个用户友好的搜索体验，确保在搜索结果为空时能及时向用户反馈。
在现代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">
<img src="https://placeimg.com/200/200/nature" alt="nature">
<figcaption>Naturaleza</figcaption>
</figure>
<figure class="card">
<img src="https://placeimg.com/200/200/any" alt="any">
<figcaption>Random</figcaption>
</figure>
<figure class="card">
<img src="https://placeimg.com/200/200/tech" alt="tech">
<figcaption>Tecnología</figcaption>
</figure>
<figure class="card">
<img src="https://placeimg.com/200/200/people" alt="people">
<figcaption>Persona</figcaption>
</figure>
<figure class="card">
<img src="https://placeimg.com/200/200/animals" alt="animals">
<figcaption>Animal</figcaption>
</figure>
<figure class="card">
<img src="https://placeimg.com/200/200/arch" alt="arch">
<figcaption>Arquitectura</figcaption>
</figure>
</article>
</section>CSS 样式
为了隐藏不匹配的卡片和“无匹配项”提示，我们定义一个 .hidden 类。关键在于使用 display: none; 而不是 visibility: hidden;，因为 display: none; 会将元素从文档流中完全移除，不占用任何空间，从而避免布局问题。
立即学习“Java免费学习笔记（深入）”；
.hidden {
display: none; /* 将元素从文档流中移除 */
opacity: 0; /* 配合过渡效果，虽然 display: none 会立即隐藏 */
order: 1; /* 可能用于 Flexbox/Grid 布局，将隐藏元素排序到末尾 */
}JavaScript 过滤逻辑
JavaScript 代码将监听搜索输入框的 keyup 事件。每当用户输入时，它会遍历所有卡片，根据卡片文本内容是否包含搜索关键词来添加或移除 .hidden 类。
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");
});增强功能：添加“无匹配项”提示
现在，我们来完善上述JavaScript代码，使其在没有搜索结果时显示提示信息。
JavaScript 逻辑更新
在卡片过滤逻辑之后，我们需要检查当前有多少卡片是可见的（即没有 .hidden 类）。根据这个数量，我们来决定是否显示 #mensaje 元素。
- 收集可见元素： 使用 querySelectorAll 结合 filter 方法，筛选出所有未被隐藏的卡片。
- 判断结果数量： 检查可见卡片数组的长度。
- 切换提示信息： 如果有可见卡片，则隐藏 #mensaje；如果没有可见卡片，则显示 #mensaje。
以下是完整的JavaScript代码，包含了这一增强功能：
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): 在JavaScript函数中，使用 if (!condition) return; 这样的早期返回语句可以使代码更扁平、更易读，避免深层嵌套。
- 语义化类名: 使用如 hidden 这样的类名比 filter 更清晰地表达了其作用。
- 性能优化: 对于非常大量的DOM元素，频繁的 querySelectorAll 和 DOM 操作可能会影响性能。可以考虑对元素进行一次性获取，或者使用虚拟DOM库（如React, Vue）来优化。对于本例中的少量卡片，原生JS的性能是足够的。
- 可访问性 (Accessibility): 对于屏幕阅读器用户，当内容动态变化时，可以考虑使用ARIA属性（如 aria-live）来通知用户。
总结
通过本教程，您学会了如何使用原生JavaScript构建一个功能完善的搜索过滤器，并添加了用户友好的“无匹配项”提示。这包括了HTML结构的设置、CSS样式的优化（特别是 display: none 的应用），以及核心的JavaScript逻辑，用于根据搜索关键词动态显示或隐藏元素，并根据结果数量切换提示信息。掌握这些技术将帮助您创建更具交互性和用户体验的Web应用。
