优化JavaScript搜索过滤器：添加无匹配结果提示与最佳实践

DDD

发布时间：2025-12-01 10:43:02

853人浏览过

来源于php中文网

原创

优化JavaScript搜索过滤器：添加无匹配结果提示与最佳实践

本文详细介绍了如何使用原生javascript实现一个功能完善的搜索过滤器，并重点解决在没有匹配项时显示“无匹配结果”提示的需求。教程涵盖了html结构、css样式以及核心javascript逻辑，并提供了代码优化建议，包括使用`display: none`进行元素隐藏以及通过检查过滤结果数量来动态管理提示消息的显示，旨在帮助开发者构建更用户友好的搜索界面。

构建基础搜索过滤器

一个实用的搜索过滤器首先需要清晰的HTML结构来承载搜索输入框、待过滤的项目列表以及用于显示无匹配结果的提示信息。CSS则负责控制元素的初始状态和过滤后的显示效果。

HTML结构

我们将创建一个包含搜索输入框、一个用于显示“无匹配结果”的段落，以及一个包含多个可过滤卡片（figure.card）的容器。


    Filtro de Búsqueda
    
    
    无匹配结果 
    
        
            @@##@@
            自然风光
        
        
            @@##@@
            随机
        
        
            @@##@@
            科技
        
        
            @@##@@
            人物
        
        
            @@##@@
            动物
        
        
            @@##@@
            建筑

CSS样式

为了在过滤时隐藏不匹配的元素，我们定义一个.hidden类。关键在于使用display: none，它不仅隐藏元素，还会将其从文档流中移除，避免占用空间。相比之下，visibility: hidden虽然隐藏元素，但其仍会占据布局空间，通常不适用于需要完全移除元素视觉和布局影响的场景。

.hidden {
  display: none; /* 隐藏元素并从文档流中移除 */
  opacity: 0;    /* 可选：配合过渡效果 */
  order: 1;      /* 可选：如果使用Flexbox/Grid布局，可调整顺序 */
}

JavaScript过滤逻辑

核心JavaScript逻辑是监听搜索输入框的keyup事件。当用户输入时，遍历所有卡片，根据卡片文本内容是否包含搜索关键词来决定显示或隐藏。

立即学习“Java免费学习笔记（深入）”；

Lifetoon

免费的AI漫画创作平台

下载

const d = document;

export default function filtroBusqueda(inputSelector, itemSelector) {
  d.addEventListener('keyup', e => {
    // 使用早期返回语句，优化代码可读性
    if (!e.target.matches(inputSelector)) return; 

    // 如果按下Escape键，清空搜索框
    if (e.key === 'Escape') e.target.value = ''; 

    const searchTerm = e.target.value.toLowerCase(); // 获取并转换为小写

    d.querySelectorAll(itemSelector).forEach(item => {
      // 检查元素文本内容是否包含搜索词
      if (item.textContent.toLowerCase().includes(searchTerm)) {
        item.classList.remove("hidden"); // 匹配则显示
      } else {
        item.classList.add("hidden");    // 不匹配则隐藏
      }
    });

    // 此处将添加显示“无匹配结果”消息的逻辑
  });
}

// 在主文件中调用
// d.addEventListener('DOMContentLoaded', e => {
//   filtroBusqueda('.card-filter', '.card');
// });

添加“无匹配结果”提示

在完成元素的显示/隐藏操作后，我们需要判断当前是否有任何匹配的元素。如果没有，则显示“无匹配结果”的提示消息；否则，隐藏该消息。

这个逻辑应该紧随在所有卡片被过滤之后执行。

const d = document;

export default function filtroBusqueda(inputSelector, itemSelector) {
  d.addEventListener("keyup", (e) => {
    if (!e.target.matches(inputSelector)) return;
    if (e.key === "Escape") e.target.value = "";

    const searchTerm = e.target.value.toLowerCase();

    d.querySelectorAll(itemSelector).forEach((item) => {
      item.textContent.toLowerCase().includes(searchTerm)
        ? item.classList.remove("hidden")
        : item.classList.add("hidden");
    });

    // 获取所有未被隐藏的卡片，即匹配结果
    const visibleResults = [...d.querySelectorAll(itemSelector)].filter(
      (item) => !item.classList.contains("hidden")
    );

    const messageElement = d.querySelector("#mensaje"); // 获取提示消息元素

    // 根据可见结果的数量来显示或隐藏提示消息
    if (visibleResults.length) {
      messageElement.classList.add("hidden"); // 有结果，隐藏消息
    } else {
      messageElement.classList.remove("hidden"); // 无结果，显示消息
    }
  });
}

// 在主文件中调用 (例如 index.js)
// d.addEventListener('DOMContentLoaded', e => {
//   filtroBusqueda('.card-filter', '.card');
// });

完整示例代码

为了方便集成和理解，以下是整合了HTML、CSS和JavaScript的完整代码示例。

HTML (index.html)




    
    
    JavaScript 搜索过滤器
     


    
        Filtro de Búsqueda
        
        无匹配结果 
        
            
                @@##@@
                自然风光
            
            
                @@##@@
                随机
            
            
                @@##@@
                科技
            
            
                @@##@@
                人物
            
            
                @@##@@
                动物
            
            
                @@##@@
                建筑

CSS (./css/style.css)

body {
    font-family: sans-serif;
    margin: 20px;
}

.section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-filter {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.contenedor-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.card figcaption {
    padding: 10px;
    background-color: #f9f9f9;
    font-weight: bold;
}

/* 隐藏元素的样式 */
.hidden {
  display: none; 
  opacity: 0;
  order: 1; /* 在Flexbox/Grid中可用于排序 */
}

/* 无匹配结果消息的样式 */
#mensaje {
    color: #cc0000;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #ffe0e0;
    border: 1px solid #ffb3b3;
    border-radius: 4px;
}

JavaScript (./js/filtro_de_busqueda.js)

const d = document;

export default function filtroBusqueda(inputSelector, itemSelector) {
  d.addEventListener("keyup", (e) => {
    // 早期返回语句，如果事件目标不是搜索输入框，则直接退出
    if (!e.target.matches(inputSelector)) return; 

    // 如果按下Escape键，清空搜索框内容
    if (e.key === "Escape") e.target.value = "";

    const searchTerm = e.target.value.toLowerCase(); // 获取搜索关键词并转换为小写

    // 遍历所有可过滤的元素
    d.querySelectorAll(itemSelector).forEach((item) => {
      // 判断元素的文本内容是否包含搜索关键词
      if (item.textContent.toLowerCase().includes(searchTerm)) {
        item.classList.remove("hidden"); // 匹配则移除隐藏类，显示元素
      } else {
        item.classList.add("hidden");    // 不匹配则添加隐藏类，隐藏元素
      }
    });

    // 过滤出当前可见（未被隐藏）的元素
    const visibleResults = [...d.querySelectorAll(itemSelector)].filter(
      (item) => !item.classList.contains("hidden")
    );

    const messageElement = d.querySelector("#mensaje"); // 获取“无匹配结果”提示元素

    // 根据可见结果的数量来显示或隐藏提示消息
    if (visibleResults.length) {
      messageElement.classList.add("hidden"); // 如果有可见结果，则隐藏提示消息
    } else {
      messageElement.classList.remove("hidden"); // 如果没有可见结果，则显示提示消息
    }
  });
}

JavaScript (./js/index.js)

import filtroBusqueda from './filtro_de_busqueda.js'; // 导入过滤函数

const d = document;

// 当DOM内容完全加载后，初始化搜索过滤器
d.addEventListener('DOMContentLoaded', e => {
  filtroBusqueda('.card-filter', '.card'); // 调用过滤器函数，传入搜索输入框和卡片的选择器
});

注意事项与总结

display: none vs visibility: hidden: 在需要完全移除元素视觉和布局空间时，始终优先使用display: none。visibility: hidden会保留元素的空间，可能导致布局错乱。
早期返回语句: if (!e.target.matches(inputSelector)) return; 这样的早期返回语句可以提高代码的可读性和维护性，避免深层嵌套。
性能优化: 对于包含大量可过滤项的列表，频繁地操作DOM（querySelectorAll和classList操作）可能会影响性能。可以考虑使用虚拟列表、节流（throttle）或防抖（debounce）技术来优化事件处理。
用户体验:
- 清除按钮: 除了Escape键，可以在搜索框内添加一个“X”按钮，方便用户一键清除搜索内容。
- 加载状态: 对于数据量大、需要异步加载的搜索，可以显示加载指示器。
- 无障碍性: 考虑为搜索输入框添加aria-label或aria-labelledby属性，为屏幕阅读器用户提供更好的体验。
模块化: 将搜索过滤器的逻辑封装在一个独立的模块中（如filtro_de_busqueda.js），并通过import/export进行管理，有助于代码的组织和复用。

通过上述步骤和优化建议，您可以构建一个功能完善、用户体验良好且易于维护的JavaScript搜索过滤器。

HTML下拉框怎么设类名_HTML下拉框加class用CSS统一样式【类】

CSS 中 ID 选择器以数字开头时需转义，否则样式不生效

HTML5如何让图片循环切换_HTML5图片循环切换方法【自动】

为什么 CSS 中以数字开头的 ID 选择器（如 #7）无法生效？

html如何保留样式转pdf_html转pdf保样式诀窍【技巧】

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

554

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

394

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

551

2023.09.20