本教程详细介绍了如何使用原生javascript构建一个动态搜索过滤器，并在此基础上增加一个“无匹配项”提示功能。文章将通过优化dom操作、css样式（特别是`display: none`的使用），以及清晰的javascript逻辑，指导开发者实现一个用户友好的搜索体验，确保在搜索结果为空时能及时向用户反馈。
在现代Web应用中，搜索过滤功能是提升用户体验的关键一环。当用户输入查询词时，实时显示匹配结果并隐藏不匹配项，是基础功能。然而，当没有任何结果匹配用户的搜索时，提供一个明确的“无匹配项”提示，能够显著改善用户交互。本教程将引导您逐步实现这一功能。
核心功能：基础搜索过滤实现
首先，我们构建一个基础的搜索过滤器。它包含一个搜索输入框和一系列可被过滤的卡片元素。
HTML 结构
我们的HTML结构包括一个搜索输入框 (.card-filter)、一个用于显示“无匹配项”的段落 (#mensaje)，以及一个包含多个卡片 (.card) 的容器。
Filtro de Búsqueda
Los resultados no coincinden con la busqueda
@@##@@ Naturaleza @@##@@ Random @@##@@ Tecnología @@##@@ Persona @@##@@ Animal @@##@@ Arquitectura
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应用。
以上就是使用原生JavaScript实现动态搜索过滤及无结果提示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1601612.html
微信扫一扫 
支付宝扫一扫 
