Search code examples
javascripthtmlcssbootstrap-4materialize

How to filter/search through materialize css/bootstrap when cards are used?

I am trying to make a html page using materialize css and bootstrap. So I wanted to place cards denoting youtube videos and I wanted to have a search bar that can browse through the cards and show the one that's being searched... So I found out a solution that's half correct for what I was expecting.

.searchBox{
    margin: 4em;
}

.grid-container{
    display: grid;
    border: 1px solid black;
    grid-template-columns: 70% 10% 20%;
    margin: 4em;
}

.grid-item1{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 20px;
    border: 1px solid black;
}


.grid-item2{
    border: 1px solid black;
}
.grid-item3{
    border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Document</title>
    <link href="./style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <nav>
        <div class="nav-wrapper">
          <a href="#" class="brand-logo center">Logo</a>
          <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="#">About</a></li>
            <li><a href="#">Notice</a></li>
            <li><a href="#">Contact Me</a></li>
          </ul>
        </div>
      </nav>

      
      <ul class="sidenav" id="mobile-demo">
        <li><a href="#">About</a></li>
        <li><a href="#">Notice</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>

      <!--
        <div class="searchBox">
        <nav>
            <div class="nav-wrapper">
              <form>
                <div class="input-field">
                  <input id="search" type="search" required>
                  <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                  <i class="material-icons">close</i>
                </div>
              </form>
            </div>
          </nav>
      </div>
      -->


      <div class="container" style="margin-top: 50px;">
        <input class="form-control" id="myInput" type="text" placeholder="Search with Lab Name or with GSPXXX">
      </div>
        <div id="myDIV" class="grid-container">
          

            <div class="grid-item1">
              <!--card 1-->
              <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                  <img class="activator" src="https://i.pinimg.com/originals/c3/72/68/c37268f25399ca437cf1b453a8189ef1.png">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">ccc</span>
                  <p><a href="#">gsp878</a></p>
                </div>
              </div>
              <!--card 2-->
              <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                  <img class="activator" src="https://i.pinimg.com/originals/c3/72/68/c37268f25399ca437cf1b453a8189ef1.png">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">bbb</span>
                  <p><a href="#">gsp430</a></p>
                </div>
              </div>
              <!--card 3-->
              <div class="card">
                <div class="card-image waves-effect waves-block waves-light">
                  <img class="activator" src="https://i.pinimg.com/originals/c3/72/68/c37268f25399ca437cf1b453a8189ef1.png">
                </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">aaa</span>
                  <p><a href="#">gsp203</a></p>
                </div>
              </div>
              <!--card end-->
            </div>
  
            <div class="grid-item2">2</div>
  
            <div class="grid-item3">3</div>
  
        
        </div>
      
      
      <script>
      $(document).ready(function(){
        $("#myInput").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          $("#myDIV *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          });
        });
      });
      </script>
      
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script>
        document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    M.Sidenav.init(elems);
  });
      </script>
</body>
</html>

If you run the code snippet you will come to know that when you search "aaa/bbb/ccc" the card image and the "gsp430/.../..." part totally disappears. And same with when you search something like "gsp430" then the card title and the card image disappears...I wanted to implement something that could show the entire card... Is there any solution to this?

Solution

  • I changed your script in two points:

    1. the filter will be applied on .card-content elements only: $("#myDIV .card-content").filter(...)

    2. The actual toggle() is then applied on the closest() parent of the filtered element: $(this).closest(".card").toggle(vis);

    The variable vis was calculated as let vis=$(this).text().toLowerCase().indexOf(value) > -1; before.

    $(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV .card-content").filter(function() {
      let vis = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).closest(".card").toggle(vis)
    });
  });
});

document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      M.Sidenav.init(elems);
});
    .searchBox {
  margin: 4em;
}

.grid-container {
  display: grid;
  border: 1px solid black;
  grid-template-columns: 70% 10% 20%;
  margin: 4em;
}

.grid-item1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
  border: 1px solid black;
}

.grid-item2 {
  border: 1px solid black;
}

.grid-item3 {
  border: 1px solid black;
}
    <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <title>Document</title>
  <link href="./style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#">About</a></li>
        <li><a href="#">Notice</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </div>
  </nav>


  <ul class="sidenav" id="mobile-demo">
    <li><a href="#">About</a></li>
    <li><a href="#">Notice</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>

  <!--
        <div class="searchBox">
        <nav>
            <div class="nav-wrapper">
              <form>
                <div class="input-field">
                  <input id="search" type="search" required>
                  <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                  <i class="material-icons">close</i>
                </div>
              </form>
            </div>
          </nav>
      </div>
      -->


  <div class="container" style="margin-top: 50px;">
    <input class="form-control" id="myInput" type="text" placeholder="Search with Lab Name or with GSPXXX">
  </div>
  <div id="myDIV" class="grid-container">


    <div class="grid-item1">
      <!--card 1-->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="https://i.pinimg.com/originals/c3/72/68/c37268f25399ca437cf1b453a8189ef1.png">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">ccc</span>
          <p><a href="#">gsp878</a></p>
        </div>
      </div>
      <!--card 2-->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="https://i.pinimg.com/originals/c3/72/68/c37268f25399ca437cf1b453a8189ef1.png">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">bbb</span>
          <p><a href="#">gsp430</a></p>
        </div>
      </div>
      <!--card 3-->
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator" src="https://i.pinimg.com/originals/c3/72/68/c37268f25399ca437cf1b453a8189ef1.png">
        </div>
        <div class="card-content">
          <span class="card-title activator grey-text text-darken-4">aaa</span>
          <p><a href="#">gsp203</a></p>
        </div>
      </div>
      <!--card end-->
    </div>

    <div class="grid-item2">2</div>

    <div class="grid-item3">3</div>


  </div>
</body>