使用原生JavaScript实现动态搜索过滤及无结果提示

<section id="seccion-diez" class="section">
  <h2 data-dark>Filtro de Búsqueda</h2>
  <input type="search" name="busqueda" placeholder="Buscar..." class="card-filter">
  <!-- 初始时隐藏，当无匹配项时显示 -->
  <p class="hidden" id="mensaje">Los resultados no coincinden con la busqueda</p>
  <article class="contenedor-cards">
    <figure class="card">
      <img src="https://placeimg.com/200/200/nature" alt="nature">
      <figcaption>Naturaleza</figcaption>
    </figure>
    <figure class="card">
      <img src="https://placeimg.com/200/200/any" alt="any">
      <figcaption>Random</figcaption>
    </figure>
    <figure class="card">
      <img src="https://placeimg.com/200/200/tech" alt="tech">
      <figcaption>Tecnología</figcaption>
    </figure>
    <figure class="card">
      <img src="https://placeimg.com/200/200/people" alt="people">
      <figcaption>Persona</figcaption>
    </figure>
    <figure class="card">
      <img src="https://placeimg.com/200/200/animals" alt="animals">
      <figcaption>Animal</figcaption>
    </figure>
    <figure class="card">
      <img src="https://placeimg.com/200/200/arch" alt="arch">
      <figcaption>Arquitectura</figcaption>
    </figure>
  </article>
</section>

.hidden {
  display: none; /* 将元素从文档流中移除 */
  opacity: 0;    /* 配合过渡效果，虽然 display: none 会立即隐藏 */
  order: 1;      /* 可能用于 Flexbox/Grid 布局，将隐藏元素排序到末尾 */
}

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

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