实现动态卡片搜索无结果提示的优化方法

function myFunction() {
  // ... 其他变量定义 ...
  noContent.style.display = "none"; // 每次搜索前隐藏
  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"; // 问题所在：在循环内就显示了
    }
  }
}

<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-body">
      <h1 class="card-title">Auto Repair</h1>
    </div>
    <!-- ... 其他卡片内容 ... -->
  </div>
  <div class="blog-card">
    <div class="blog-card-body">
      <h1 class="card-title">Dentist</h1>
    </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>

function myFunction() {
  // 1. 获取DOM元素
  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"));

  // 2. 每次搜索前，首先隐藏所有卡片
  cards.forEach(card => card.style.display = "none");

  // 3. 过滤匹配搜索条件的卡片
  const matchingCards = cards.filter(
    card => card.querySelector(".card-title").innerText.toUpperCase().includes(filter)
  );

  // 4. 显示所有匹配的卡片
  matchingCards.forEach(card => card.style.display = "block");

  // 5. 根据匹配卡片的数量，决定是否显示“无内容”提示
  noContent.style.display = (matchingCards.length === 0 ? "flex" : "none");
}

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

/* 输入框样式 */
.input-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.input-container .search-imput {
  margin: 20px;
  width: 50%;
  height: 40px;
  border-radius: 30px;
  border: 2px solid #6F77E9;
}

::placeholder {
  color: #161663;
  font-weight: bold;
  text-align: center;
  font-size: 1em;
}

/* 卡片容器样式 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: 50px;
  width: 100%; /* 注意这里将 100%px 改为 100% */
}

/* 单个卡片样式 */
.blog-card {
  width: 490px;
  height: 470px;
  margin: 15px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(22, 22, 99, 0.30);
  box-shadow: 0px 0px 4px 0px rgba(22, 22, 99, 0.30);
}

.blog-card p {
  font-family: 'Montserrat', sans-serif;
  margin: 0px;
  padding: 0px 30px;
}

.blog-card .blog-card-head img {
  padding: 20px;
  width: 92%;
  border-radius: 30px;
}

.blog-card .blog-card-head h2 {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  color: #161663;
}

.blog-card .blog-card-footer,
.blog-card .blog-card-body {
  display: flex;
  align-items: center;
}

.blog-card .blog-card-body {
  padding: 0px 20px;
}

.blog-card .blog-card-body img {
  width: 50px;
}

.blog-card .blog-card-body h1 {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #161663;
}

.blog-card .blog-card-footer {
  padding: 0px 20px;
}

.blog-card .blog-card-footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
}

.blog-card .blog-card-footer img {
  margin: 10px;
  width: 30px;
}

/* 无内容提示样式 */
.no-content {
  width: 100vw; /* 占据整个视口宽度 */
  height: 50vh; /* 占据视口高度的一半 */
  display: flex; /* 使用Flexbox进行布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

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