使用原生JavaScript为搜索过滤器添加“无匹配结果”提示

<section id="seccion-diez" class="section">
    <h2 data-dark>搜索过滤器</h2>
    <input type="search" name="busqueda" placeholder="搜索..." class="card-filter">
    <!-- 无匹配结果提示信息，初始时带有 'hidden' 类 -->
    <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>

.hidden {
  display: none; /* 彻底隐藏元素，不占据空间 */
  opacity: 0;    /* 配合过渡效果，确保平滑隐藏 */
  order: 1;      /* 如果使用Flexbox或Grid，可用于排序 */
}

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");
    }
  });
}

// index.js
import filtroBusqueda from './filtro_de_busqueda.js'; // 假设你的过滤函数在 filtro_de_busqueda.js 中

const d = document;

d.addEventListener('DOMContentLoaded', e => {
    // 调用过滤函数，传入搜索框和卡片的选择器
    filtroBusqueda('.card-filter', '.card');
});

<script type="module" src="./js/index.js" ></script>