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

Time：08-26

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 >
  <input type="text" id="myFilter"  onkeyup="myFunction()" placeholder="Search for names..">
</div>

<div  id="myItems">

  <div >
    <!--Card begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Veterinarian.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Plumber-topbar-icon.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Movers.svg" alt="">
      <h1 >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 >
      <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  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

CodePudding user response：

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 >
  <input type="text" id="myFilter"  onkeyup="myFunction()" placeholder="Search for names..">
</div>


<div  id="myItems">

  <div >
    <!--Card begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Veterinarian.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Plumber-topbar-icon.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Movers.svg" alt="">
      <h1 >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 >
      <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  id="no-content" style="display: none;">
  <h1>there are no more blog post with this term</h1>
</div>

CodePudding user response：

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 >
  <input type="text" id="myFilter"  onkeyup="myFunction()" placeholder="Search for names..">
</div>


<div  id="myItems">

  <div >
    <!--Card begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Dentist.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Veterinarian.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Plumber-topbar-icon.svg" alt="">
      <h1 >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 >
      <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 begings here-->
    <div >
      <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 >
      <img src="https://www.homeserviceguide.pro/wp-content/uploads/2022/06/Movers.svg" alt="">
      <h1 >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 >
      <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  id="no-content" style="display: none;">
  <h1>there are no more blog post with this term</h1>
</div>

Page link：https//www.codepudding.com/Blockchain/523624.html

Prev:Why is CSS so much slower than inline style
Next:Single HTML link across multiple, non-contiguous words/lines?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding