使用 javascript/jquery Bootrsrap 卡实时搜索

Question

我想为不使用数据库的引导卡创建一个实时搜索栏。我能够完成实时搜索，但它保留了不可见搜索和过滤搜索之间的空间。这是我用来过滤卡片的脚本，

$(document).ready(function () {

    $("#anythingSearch").on("keyup", function () {

        var value = $(this).val().toLowerCase();

        $("#myDIV .card").filter(function () {

            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

        });

     });

 });

所有卡片的编码为，

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

搜索前：

搜索后：

请告诉我如何摆脱这些空格。

Answer 1

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