使用javascript / jquery进行Bootrsrap卡实时搜索

问题描述

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

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

搜索之前：

搜索后：

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

解决方法

$(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/