本教程将指导您如何利用原生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; 则会将其完全从文档流中移除。
立即学习“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.jsimport 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：
5. 总结与最佳实践
通过上述步骤，我们成功地为原生JavaScript搜索过滤器添加了“无匹配结果”提示功能。在实现过程中，我们遵循了以下最佳实践：
语义化类名： 使用 hidden 而不是 filter 更清晰地表达了类的作用。正确的隐藏方式： 优先使用 display: none; 来彻底隐藏元素并移除其布局空间。性能优化： 使用 e.target.matches(input) 进行早期返回，避免在不相关的键盘事件上执行过滤逻辑。用户体验： 提供清晰的“无匹配结果”提示，增强了搜索功能的可用性。
这种方法不仅适用于简单的卡片列表，也可以扩展到更复杂的过滤场景，为用户提供更直观、友好的交互体验。
以上就是使用原生JavaScript为搜索过滤器添加“无匹配结果”提示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1601725.html
微信扫一扫 
支付宝扫一扫 
