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

Question

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

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

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

Bootrsrap card realtime search using javascript/jquery

javascript

bootstrap-cards