使用卡片时如何filter/search通过实体化css/bootstrap？

Question

我正在尝试使用 materialize css 和 bootstrap 创建一个 html 页面。所以我想放置表示 youtube 视频的卡片，我想要一个可以浏览卡片并显示正在搜索的卡片的搜索栏...... 所以我找到了一个解决方案，对我的预期只有一半正确。

.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/bootstrap@5.1.3/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>

如果您运行代码片段，您会发现当您搜索“aaa/bbb/ccc”时，卡片图像和“gsp430/.../...”部分完全消失了. 同样，当您搜索“gsp430”之类的内容时，卡片标题和卡片图像也会消失……我想实现一些可以显示整张卡片的东西…… 有解决办法吗？

Answer 1

你是运行 Bootstrap 3 .JS (bootstrapcdn) 和 Bootstrap 5 .CSS (jsdelivr).

这肯定会导致布局问题，但对于卡片，以及所有内容...不要调用 2 个不同的版本。你不需要他们两个。

Answer 2

我对你的脚本做了两点修改：

过滤器将仅应用于 .card-content 个元素：$("#myDIV .card-content").filter(...)
然后将实际的 toggle() 应用于筛选元素的 closest() 父级：$(this).closest(".card").toggle(vis);

变量vis之前计算为let vis=$(this).text().toLowerCase().indexOf(value) > -1;。

$(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/bootstrap@5.1.3/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>

使用卡片时如何filter/search通过实体化css/bootstrap？

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

javascript

html

css

bootstrap-4

materialize