Bootrsrap card realtime search using javascript/jquery

Question

I wanted to create a real-time search bar for bootstrap cards that don't use a database. I was able to get the real-time search done but it kept the spaces between invisible ones and filtered ones. This is the script I used to filter the cards out,

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

All the cards are coded as,

<div id="myDIV">
    <div class="row">
        <div class="col-md-4">
            <div class="card">...</div>
        </div>
        <div class="col-md-4">
            <div class="card">...</div>
        </div>
        <div class="col-md-4">
            <div class="card">...</div>
        </div>
        ...
    </div>
</div>

Before search:

After search:

Please tell me how to get rid of those spaces.

score 1 · Accepted Answer · answered Nov 09 '20 at 11:43

$(document).ready(function () {
    $("#anythingSearch").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#myDIV .card").filter(function () {
            // change here to the parent as if you hide card only card will hide but col will still take the place
            $(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
     });
 });

Here's jsfiddle

https://jsfiddle.net/nLo3ujbk/1/

Bootrsrap card realtime search using javascript/jquery

1 Answers1