优化JavaScript搜索过滤器：添加无匹配结果提示与最佳实践-html教程-PHP中文网

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

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

构建基础搜索过滤器

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

HTML结构

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

<section id="seccion-diez" class="section">
    <h2 data-dark>Filtro de Búsqueda</h2>
    <input type="search" name="busqueda" placeholder="搜索..." class="card-filter">
    <!-- 初始状态下隐藏的无匹配结果提示 -->
    <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>

登录后复制

CSS样式

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

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

登录后复制

JavaScript过滤逻辑

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

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

Shrink.media

Shrink.media是当今市场上最快、最直观、最智能的图像文件缩减工具

123

查看详情

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)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 搜索过滤器</title>
    <link rel="stylesheet" href="./css/style.css"> <!-- 引入CSS文件 -->
</head>
<body>
    <section id="seccion-diez" class="section">
        <h2 data-dark>Filtro de Búsqueda</h2>
        <input type="search" name="busqueda" placeholder="搜索..." class="card-filter">
        <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>

    <script type="module" src="./js/index.js"></script> <!-- 引入主JavaScript模块 -->
</body>
</html>

登录后复制

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进行管理，有助于代码的组织和复用。