how to display "Card not found" text when no card found in card search html, css, js

Question

I have a problem, I have a code from codepen it searches for the cards but when there are no results it just doesn't show anything, I made a small adjustment but it doesn't work well, when the search starts so there is only one card left it shows that text, I just want to show this text when there is no card.

here is my example: https://codepen.io/nikoocrow/pen/wvmbrgE

function myFunction() {
  var input, filter, cards, cardContainer, noContent, title, i, cardExist;

  input = document.getElementById("myFilter");
  noContent = document.getElementById("no-content");


  filter = input.value.toUpperCase();
  cardContainer = document.getElementById("myItems");
  cards = cardContainer.getElementsByClassName("blog-card");

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


  }
}

@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;
}


/* Cards */

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: 50px;
  width: 100%px;
}

.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;
  justify-content: center;
  align-items: center;
}

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

<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">

  <div class="blog-card">
    <!--Card begings here-->
    <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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <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">Dentist</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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Blog4_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/Veterinarian.svg" alt="">
      <h1 class="card-title">Veterinarian</h1>
    </div>
    <p>You always want the very best for your loved ones and we know your pet is for sure one of them. We already told you what to consider when looking for a vet, and now here we</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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/plumber-blog-1024x373.jpg" alt="">
      <h2>5 plumbing tips you need to know</h2>
    </div>
    <div class="blog-card-body">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Plumber-topbar-icon.svg" alt="">
      <h1 class="card-title">Plumber</h1>
    </div>
    <p>Here, we already told you how you can find a plumbing company or contractor, and it’s just as easy as entering your zip code and selecting the one you want to work with. </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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/movers_portrait-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/Movers.svg" alt="">
      <h1 class="card-title">Movers</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>
  <!--Card ends here-->
</div>
<!--card-container  ends here-->

<div class="no-content" id="no-content" hidden>
  <h1>there are no more blog post with this term</h1>
</div>

I found this same question but no one answered it: https://stackoverflow.com/questions/44355062/twitter-cards-no-card-found-card-error

Codepens, jsFiddles, etc. tend to expire or get deleted. It's best to create a code snippet directly in your post to keep the original code alive. I've added the snippet to your OP. — Millhorn, Aug 25 '22 at 20:45

Millhorn · Answer 1 · 2022-08-25T21:15:19.837

If the search returns with no results, your message, there are no more blog post with this term will now display.

I removed hidden and replaced it with display: none;. Then, in your else statement, I set noContent.style.display = "block";.

function myFunction() {
  var input, filter, cards, cardContainer, noContent, title, i, cardExist;

  input = document.querySelector("#myFilter");
  noContent = document.querySelector(".no-content");

  filter = input.value.toUpperCase();
  cardContainer = document.querySelector("#myItems");
  cards = cardContainer.querySelectorAll(".blog-card");

  // 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";
      noContent.style.display = 'none';
    } else {
      cards[i].style.display = "none";
      noContent.style.display = "block";
    }
  }
}

@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;
}


/* Cards */

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: 50px;
  width: 100%px;
}

.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;
  justify-content: center;
  align-items: center;
}

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

<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">

  <div class="blog-card">
    <!--Card begings here-->
    <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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <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">Dentist</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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Blog4_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/Veterinarian.svg" alt="">
      <h1 class="card-title">Veterinarian</h1>
    </div>
    <p>You always want the very best for your loved ones and we know your pet is for sure one of them. We already told you what to consider when looking for a vet, and now here we</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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/plumber-blog-1024x373.jpg" alt="">
      <h2>5 plumbing tips you need to know</h2>
    </div>
    <div class="blog-card-body">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Plumber-topbar-icon.svg" alt="">
      <h1 class="card-title">Plumber</h1>
    </div>
    <p>Here, we already told you how you can find a plumbing company or contractor, and it’s just as easy as entering your zip code and selecting the one you want to work with. </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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/movers_portrait-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/Movers.svg" alt="">
      <h1 class="card-title">Movers</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>
  <!--Card ends here-->
</div>
<!--card-container  ends here-->

<div class="no-content" id="no-content" style="display: none;">
  <h1>there are no more blog post with this term</h1>
</div>

Ok. That's too far down... I didn't even notice it. Hang on. — Millhorn, Aug 25 '22 at 21:00

score 1 · Answer 2 · answered Aug 25 '22 at 21:02

You could first search for matching cards by filtering on the array. Then you have all information you need to decide whether to show the hint text.

Consider the following code:

function myFunction() {
  const input = document.getElementById("myFilter");
  const noContent = document.getElementById("no-content");
  const filter = input.value.toUpperCase();
  const cardContainer = document.getElementById("myItems");
  const cards = Array.from(cardContainer.getElementsByClassName("blog-card"));

  // First, hide all cards
  cards.forEach(card => card.style.display = "none");

  // Find cards matching the search term
  const matchingCards = cards.filter(
    card => card.querySelector(".card-title").innerText.toUpperCase().includes(filter));

  // Make matching cards visible
  matchingCards.forEach(card => card.style.display = "block");

  // Toggle "no content" hint
  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;
}


/* Cards */

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
  margin: 50px;
  width: 100%px;
}

.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;
  justify-content: center;
  align-items: center;
}

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

<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">

  <div class="blog-card">
    <!--Card begings here-->
    <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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <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">Dentist</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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Blog4_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/Veterinarian.svg" alt="">
      <h1 class="card-title">Veterinarian</h1>
    </div>
    <p>You always want the very best for your loved ones and we know your pet is for sure one of them. We already told you what to consider when looking for a vet, and now here we</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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/plumber-blog-1024x373.jpg" alt="">
      <h2>5 plumbing tips you need to know</h2>
    </div>
    <div class="blog-card-body">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Plumber-topbar-icon.svg" alt="">
      <h1 class="card-title">Plumber</h1>
    </div>
    <p>Here, we already told you how you can find a plumbing company or contractor, and it’s just as easy as entering your zip code and selecting the one you want to work with. </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>
  <!--Card ends here-->

  <div class="blog-card">
    <!--Card begings here-->
    <div class="blog-card-head">
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/07/movers_portrait-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/Movers.svg" alt="">
      <h1 class="card-title">Movers</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>
  <!--Card ends here-->
</div>
<!--card-container  ends here-->

<div class="no-content" id="no-content" style="display: none;">
  <h1>there are no more blog post with this term</h1>
</div>

how to display "Card not found" text when no card found in card search html, css, js

2 Answers2