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

Question

When I'm searching the specific name of the image. The rest of the name of the row still showing, but I just want to view only the data from the search. See image below

Display: Select all the data from the database.

 <?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")
                    ?>

Card: This card has an animation

 <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>

And this one is the function of the search filter.

<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>

Please help me to improve the codes.

Answer 1

Update: I solved my problem using this script(jquery) update: I used this script in order to search automatically.

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