使用卡片时如何通过物化 css/bootstrap 过滤/搜索？

Posted 2023-05-07

技术标签:

【中文标题】使用卡片时如何通过物化 css/bootstrap 过滤/搜索？【英文标题】：How to filter/search through materialize css/bootstrap when cards are used? 【发布时间】：2021-12-04 22:47:53 【问题描述】：

我正在尝试使用物化 css 和引导程序制作一个 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>

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

【问题讨论】：

【参考方案1】：

您正在运行 Bootstrap 3 .JS (bootstrapcdn) 和 Bootstrap 5 .CSS (jsdelivr)。

这肯定会导致布局问题，但对于卡片，一切都很好……不要调用 2 个不同的版本。你不需要他们两个。

【讨论】：

好的，我改一下再试一次【参考方案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>

【讨论】：

以上是关于使用卡片时如何通过物化 css/bootstrap 过滤/搜索？的主要内容，如果未能解决你的问题，请参考以下文章

CSS Bootstrap flex width - 如何不通过太长的单行文本扩展父级？省略

css Bootstrap - 如何在滚动条出现时修复身体移位