JavaScript卡片搜索：优化无结果提示体验

下载万磁搜索绿色版

本文针对JavaScript动态卡片搜索中“无结果”提示显示不准确的问题，提供了一种优化方案，旨在提升用户体验。通过重构JavaScript搜索逻辑，文章提出“先隐藏全部，再选择性显示”的核心思路。首先，隐藏所有卡片；然后，根据搜索词筛选并显示匹配的卡片；最后，根据匹配卡片的数量精确控制“无内容”提示的可见性，确保提示仅在无搜索结果时才出现。文章详细介绍了HTML结构、优化的JavaScript代码以及CSS样式，并提供了大小写不敏感搜索、性能优化、用户体验和可访问性等方面的注意事项与最佳实践，帮助开发者实现一个健壮且用户友好的卡片搜索功能。

本教程旨在解决动态卡片搜索中“无结果”提示显示不准确的问题。通过重构JavaScript搜索逻辑，我们首先隐藏所有卡片，接着根据搜索词筛选出匹配的卡片并显示它们，最后根据匹配卡片的数量精确控制“无内容”提示的可见性，确保该提示仅在没有搜索结果时才出现，从而提升用户体验。

在Web开发中，实现带有搜索功能的动态卡片展示是常见的需求。然而，一个常见的挑战是如何在没有搜索结果时，准确地显示“无内容”或“卡片未找到”的提示信息。如果处理不当，可能会导致提示信息过早或错误地显示，影响用户体验。本文将详细介绍如何通过优化JavaScript逻辑，实现一个健壮且用户友好的卡片搜索功能。

初始问题分析

在传统的循环遍历卡片并逐个判断显示状态的搜索逻辑中，很容易出现一个问题：当某个卡片不匹配时，立即将“无内容”提示设置为可见。这种做法的缺陷在于，即使后续还有其他卡片能够匹配搜索条件，或者搜索结果只剩一个，该提示也可能被错误地显示出来。正确的逻辑应该是：在所有卡片都被判断完毕后，根据最终匹配到的卡片数量来决定是否显示“无内容”提示。

核心优化思路

为了解决上述问题，我们需要改变处理搜索结果的策略。核心思路可以概括为以下三步：

1. 预处理： 在开始搜索前，将所有卡片默认设置为隐藏状态。
2. 筛选： 遍历所有卡片，根据搜索词筛选出所有匹配的卡片。
3. 后处理： 根据筛选结果，显示所有匹配的卡片。如果匹配卡片数量为零，则显示“无内容”提示；否则，隐藏该提示。

这种“先全部隐藏，再选择性显示”的策略，确保了“无内容”提示的显示决策是在整个搜索过程完成后，基于最终结果做出的。

实现步骤与代码示例

我们将通过JavaScript、HTML和CSS的配合来完成这个功能。

1. HTML 结构

首先，确保你的HTML结构包含一个搜索输入框、一个卡片容器以及一个用于显示“无内容”提示的元素。

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

<div class="card-container" id="myItems">
  <!-- 示例卡片，可以有多个 -->
  <div class="blog-card">
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Blog2_DV-1024x373.jpg" alt="">
      <h2>Tips to keep your car running.</h2>
    </div>
    <div class="blog-card-body">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 class="card-title">Auto Repair</h1>
    </div>
    <p>Did you know that in 2021 there were 201,927 active dentists in the United States? That means there is a ratio of approximately 61 dentists per 100,000 people in the country…</p>
    <div class="blog-card-footer">
      <a href="#">Read More <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/ArrowRight-03.svg" 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 规则隐藏。

2. 优化的 JavaScript 逻辑

以下是经过优化的 myFunction 函数，它实现了上述的核心优化思路：

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(cardContainer.getElementsByClassName("blog-card")): getElementsByClassName 返回的是一个 HTMLCollection，它不是真正的数组，不具备 forEach 或 filter 等方法。通过 Array.from() 可以将其转换为一个可操作的数组。
• cards.forEach(card => card.style.display = "none"): 这一行在每次搜索开始时，确保所有卡片都被隐藏。这是一个关键的预处理步骤。
• cards.filter(...): 使用 filter 方法创建一个新数组 matchingCards，其中只包含标题与搜索词匹配的卡片。includes() 方法用于判断字符串是否包含另一个字符串。
• matchingCards.forEach(card => card.style.display = "block"): 遍历 matchingCards 数组，将所有匹配的卡片设置为可见。
• noContent.style.display = (matchingCards.length === 0 ? "flex" : "none"): 这是决定“无内容”提示显示与否的最终逻辑。如果 matchingCards 数组为空（即 length 为0），则显示 noContent 元素（设置为 flex 以利用其CSS样式）；否则，将其隐藏。

3. CSS 样式

确保 no-content 元素有适当的样式，以便在显示时能够居中且美观。

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Open+Sans:wght@700&display=swap');

/* 其他样式... */

.no-content {
  width: 100vw;
  height: 50vh;
  display: flex; /* 默认隐藏，通过JS控制显示时设置为flex */
  justify-content: center;
  align-items: center;
}

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

注意：在HTML中，no-content 元素默认添加了 style="display: none;"，这样可以确保页面加载时它是隐藏的。JavaScript会根据搜索结果动态地将其设置为 flex 或 none。

注意事项与最佳实践

• 大小写不敏感搜索： 在示例代码中，我们通过 toUpperCase() 将搜索词和卡片标题都转换为大写进行比较，实现了大小写不敏感的搜索。
• 性能优化： 对于非常大量的卡片（数千个以上），每次键盘输入都遍历和操作DOM可能会有性能问题。可以考虑引入去抖（debounce）技术，减少 myFunction 的调用频率，或使用虚拟滚动等高级优化手段。
• 用户体验： 可以在搜索时添加加载指示器，或者在搜索结果为空时提供建议，例如“请尝试其他关键词”。
• 可访问性： 考虑为搜索输入框添加 aria-label 或 label，并确保“无内容”提示在屏幕阅读器中可被正确识别。

总结

通过上述优化后的JavaScript逻辑，我们成功地解决了卡片搜索中“无内容”提示显示不准确的问题。核心在于将卡片显示和“无内容”提示的决策逻辑分离，先统一处理所有卡片的显示状态，再根据最终匹配结果进行判断。这种方法不仅提高了代码的健壮性，也极大地提升了用户在使用搜索功能时的体验。

以上就是《JavaScript卡片搜索：优化无结果提示体验》的详细内容，更多关于的资料请关注golang学习网公众号！