搜索过滤器引导卡未显示特定图像答案

【问题标题】：Search filter bootstrap card didn't show the specific image搜索过滤器引导卡未显示特定图像
【发布时间】：2021-06-01 16:31:31
【问题描述】：

当我搜索图像的具体名称时。该行的其余名称仍在显示，但我只想查看搜索中的数据。见下图

显示：选择数据库中的所有数据。

 <?php$checkQuery = "SELECT `h_business_logo`,`h_business_name`,`h_business_desc` FROM user_bsns WHERE h_isActive = 1  ORDER BY h_business_name DESC";
                        $checkResult = mysqli_query($db->conn, "$checkQuery")
                    ?>

卡片：这张卡片有动画

 <div class="card-body col-lg-12" >
                          <div class="card-body col-lg-12">
                          <input class="form-control" id="myInput" type="text" placeholder="Search.." style="float:left; width:25%;">
                          <button class="btn" style="margin-left: 5px;background-color: #e72329;color: white;"> Search </button>
                          </div>
                          <?php
                          if(mysqli_num_rows($checkResult) > 0):{
                          }
                            while($row = mysqli_fetch_array($checkResult)){
                              ?>
                    
                          <div class="panel" id="myDIV">
                                        <div class="holder flipH" >
                                            <div class="card shadow-none">
                                                 <div class="col-sm-0 column <?=$row['h_business_name'];?>"   >
                                                   
                                                           <div class="front"style="float:left;  >  
                                                           <img src="<?=$row['h_business_logo']; ?> " 
                                                           style="height:150px; width:155px; border-radius: 50%; ">
                                                           </div>
                                                      
                                                  </div>  
                                                 <span style= "text-align:center;">
                                                        <h5><?=$row['h_business_name'];?></h5>
                                                 </span>  
                                         <span style="text-align:center;">
                                              <p><?=$row['h_business_desc'];?></p>
                                          </span>
                                       </div>
                              </div>
                            </div>

                              <?php
                            }
                          endif;
                          ?>
                        </div>
                       
                        <!-- /.card-body -->
                </div>

而这个就是搜索过滤器的功能。

<script>
$(document).ready(function(){
  $(".btn").on("click", function() {
    var value = $("#myInput").val();
    lastval = "col-sm-5 column "+value;
    x = document.getElementsByClassName("column");
    $("#myDIV div").filter(function() {
      for (i = 0; i < x.length; i++) {
        element = x[i];
        if (element.className.indexOf(value) == -1){
          element.classList.add("nonshow");
          element.classList.remove("show");
        }
        else {
          element.classList.add("show");
          element.classList.remove("nonshow");
        }
      }
    });
  });
});
</script>

请帮助我改进代码。

【问题讨论】：

ID 必须在 HTML 文档中是唯一的，您在循环中创建 id="myDIV" 就违反了这一点。并且将div 嵌套到span 中也是不允许的。
我按照你的建议，但是显示还是一样。
那么请编辑您上面的代码，向我们展示现在的具体情况。

标签： php html css animation

【解决方案1】：

更新：我使用这个脚本（jquery）解决了我的问题更新：我使用这个脚本来自动搜索。

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

【讨论】：