javascript - 使用 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 () {
    $("#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)
        });
     });
 });

这是jsfiddle

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