使用 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/