实现动态搜索卡片并准确显示“无结果”提示的教程-html教程-PHP中文网

实现动态搜索卡片并准确显示“无结果”提示的教程

心靈之曲

发布： 2025-10-28 13:03:11

原创

476人浏览过

实现动态搜索卡片并准确显示“无结果”提示的教程

本教程详细介绍了如何优化javascript卡片搜索功能，确保“无结果”提示仅在没有匹配项时显示，而非在搜索过程中误触。通过重构搜索逻辑，首先筛选出所有匹配项，然后根据匹配结果的数量来控制卡片的显示与“无结果”提示的切换，从而提供更准确、用户友好的交互体验。

在现代Web应用中，动态内容过滤和搜索是常见功能。当用户在搜索框中输入关键词时，页面上的卡片（或其他内容项）会根据关键词进行筛选，只显示匹配的结果。然而，一个常见的挑战是，如何在没有匹配结果时，优雅地显示一个“无结果”提示，而不是在每次隐藏一个不匹配的卡片时都错误地显示它。本文将深入探讨如何通过优化JavaScript逻辑来解决这一问题，确保“无结果”提示的准确显示。

问题分析：原始方法的不足

原始的搜索逻辑通常在一个循环中遍历所有卡片。在循环内部，如果一张卡片不匹配搜索条件，它会被隐藏，并且“无结果”提示可能会被设置为显示。这种逐个判断的方式会导致问题：即使还有其他卡片匹配，只要当前循环到的卡片不匹配，提示就可能被错误地显示出来。

例如，以下是原始代码片段中的关键逻辑：

for (i = 0; i < cards.length; i++) {
  title = cards[i].querySelector(".card-title");
  if (title.innerText.toUpperCase().indexOf(filter) > -1) {
    cards[i].style.display = "block";
  } else {
    cards[i].style.display = "none";
    // 这里的逻辑会导致问题：只要有一个卡片不匹配，就显示“无内容”
    noContent.style.display = "flex"; 
  }
}

登录后复制

这段代码的问题在于，noContent.style.display = "flex"; 这行代码在每次遇到不匹配的卡片时都会执行。如果搜索结果只剩下一张卡片，而其他卡片都被隐藏，那么在隐藏那些不匹配的卡片时，“无内容”提示就会被错误地显示出来。我们期望的是，只有当所有卡片都不匹配时，才显示“无内容”提示。

优化解决方案：先过滤后显示

为了解决上述问题，我们需要改变处理逻辑：首先遍历所有卡片，找出所有匹配的卡片，然后根据匹配卡片的总数来决定是显示匹配卡片还是“无结果”提示。

以下是优化后的JavaScript代码：

function myFunction() {
  const input = document.getElementById("myFilter");
  const noContent = document.getElementById("no-content");
  const filter = input.value.toUpperCase();
  const cardContainer = document.getElementById("myItems");
  // 将HTMLCollection转换为数组，以便使用forEach和filter等数组方法
  const cards = Array.from(cardContainer.getElementsByClassName("blog-card"));

  // 1. 首先，隐藏所有卡片，为后续的显示做准备
  cards.forEach(card => card.style.display = "none");

  // 2. 筛选出所有匹配搜索条件的卡片
  const matchingCards = cards.filter(
    card => card.querySelector(".card-title").innerText.toUpperCase().includes(filter));

  // 3. 使所有匹配的卡片可见
  matchingCards.forEach(card => card.style.display = "block");

  // 4. 根据匹配卡片的数量来切换“无内容”提示的显示状态
  noContent.style.display = (matchingCards.length === 0 ? "flex" : "none"); 
}

登录后复制

关键改进点：

转换为数组： 使用 Array.from() 将 getElementsByClassName 返回的 HTMLCollection 转换为真正的数组。这使得我们可以方便地使用 forEach、filter 等现代JavaScript数组方法。
统一隐藏： 在开始筛选之前，先将所有卡片隐藏。这样可以确保在每次搜索操作开始时，UI处于一个干净的状态。
集中过滤： 使用 filter() 方法一次性找出所有符合搜索条件的卡片，并将它们存储在 matchingCards 数组中。
集中显示： 遍历 matchingCards 数组，只显示这些匹配的卡片。
条件判断显示“无结果”： 最后，根据 matchingCards 数组的长度来判断是否显示“无结果”提示。如果 matchingCards.length 为 0，则表示没有匹配的卡片，此时才显示 noContent 元素。

HTML结构

为了支持上述JavaScript逻辑，HTML结构需要包含搜索输入框、卡片容器和“无结果”提示元素。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

<div class="input-container">
  <input type="text" id="myFilter" class="search-imput" onkeyup="myFunction()" placeholder="Search for names..">
</div>

<div class="card-container" id="myItems">
  <!-- 多个 .blog-card 元素 -->
  <div class="blog-card">
    <div class="blog-card-head">
      <img src="..." alt="">
      <h2>Tips to keep your car running.</h2>
    </div>
    <div class="blog-card-body">
      <img src="..." alt="">
      <h1 class="card-title">Auto Repair</h1>
    </div>
    <p>...</p>
    <div class="blog-card-footer">
      <a href="#">Read More <img src="..." alt=""></a>
    </div>
  </div>
  <!-- ... 更多卡片 ... -->
</div>

<!-- 无结果提示，初始可以隐藏 -->
<div class="no-content" id="no-content" style="display: none;">
  <h1>there are no more blog post with this term</h1>
</div>

登录后复制

注意： 初始时，no-content 元素可以通过 style="display: none;" 或者在CSS中设置 display: none; 来隐藏。JavaScript会根据搜索结果动态控制其显示。

CSS样式

CSS样式主要用于布局和美化卡片以及“无结果”提示。以下是与功能相关的关键样式：

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* ... 其他样式 ... */
}

.blog-card {
  /* ... 卡片样式 ... */
}

.no-content {
  width: 100vw;
  height: 50vh;
  display: flex; /* 默认设置为flex，方便JavaScript控制显示/隐藏 */
  justify-content: center;
  align-items: center;
  /* ... 其他样式 ... */
}

.no-content h1 {
  font-size: 20px;
  padding: 0px 20px;
  font-family: 'Montserrat', sans-serif;
  color: #161663;
}

登录后复制

这里 .no-content 的 display: flex; 是在它被显示时的默认状态。JavaScript会通过设置 noContent.style.display = "none"; 或 noContent.style.display = "flex"; 来覆盖这个状态。