How do i implement search function on bootstrap cards?

user_16870025 0
Viewed 107

I have been trying to implement a search function in my bootstrap cards, I have tried a bunch of methods online but none have worked for me so far. Here is my html code: Can anyone help me implementing a search filter in my app?

<

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorials</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="/">Home</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" id="myInput" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
      <div id="cool">
    <div class="card" style="width: 18rem;">
        <img src="/static/MinecraftBR.png" class="card-img-top" alt="Backround">
        <div class="card-body">
          <h5 class="card-title">Minecraft</h5>
          <p class="card-text">Find some quick minecraft tutorials from servers to acheivments!(Java And Bedrock)</p>
          <a href="/minecraft" class="btn btn-primary">Let's Go!</a>
        </div>
      </div>
      <div class="genshin">
      <div class="card" style="width: 18rem;">
        <img src="/static/Untitled Design.png" class="card-img-top" alt="Backround">
        <div class="card-body">
          <h5 class="card-title">Genshin Impact</h5>
          <p class="card-text">Need any help with acheivments? We got them covered for you! (Cross Platform)</p>
          <a href="/genshinimpact" class="btn btn-primary">Let's Go!</a>
        </div>
      </div>
      </div>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
      <script>
        
      </script>
</body>
</html>

css html python javascript
1 Answers

Code for searching through the card titles and hiding the cards which dont match the search input.

function search() {
  // Declare variables
  var input, filter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  cards = document.getElementsByClassName("card")
  titles = document.getElementsByClassName("card-title");

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < cards.length; i++) {
    a = titles[i];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      cards[i].style.display = "";
    } else {
      cards[i].style.display = "none";
    }
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorials</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="/">Home</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" id="myInput" type="search" placeholder="Search" aria-label="Search" onkeyup="search()">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
      <div id="cool">
    <div class="card" style="width: 18rem;">
        <img src="/static/MinecraftBR.png" class="card-img-top" alt="Backround">
        <div class="card-body">
          <h5 class="card-title">Minecraft</h5>
          <p class="card-text">Find some quick minecraft tutorials from servers to acheivments!(Java And Bedrock)</p>
          <a href="/minecraft" class="btn btn-primary">Let's Go!</a>
        </div>
      </div>
      <div class="genshin">
      <div class="card" style="width: 18rem;">
        <img src="/static/Untitled Design.png" class="card-img-top" alt="Backround">
        <div class="card-body">
          <h5 class="card-title">Genshin Impact</h5>
          <p class="card-text">Need any help with acheivments? We got them covered for you! (Cross Platform)</p>
          <a href="/genshinimpact" class="btn btn-primary">Let's Go!</a>
        </div>
      </div>
      </div>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
      <script>
        
      </script>
</body>
</html>

user_182541550
Related