Javascript 搜索栏显示空洞代替未显示的卡片

Question

所以我正在构建这个在线学习网站，并且我有一个所有课程的目录，您可以在其中搜索标题或描述包含搜索栏中输入的课程。我用了 bootstrap 卡片来制作目录。它运行良好，但在桌面上，我用空白空间代替隐藏的卡片，结果显示它们之间有很大的空白空间，中间有课程等。移动设备上没有问题，所有结果在一个之后垂直显示其他。有办法解决这个问题吗？谢谢！

Picture to see the "empty spaces"

JS代码：

$('#live_search').on('keyup', function() {
    let input = $(this).val();
    $('.card').hide();
    $('.card').filter(function() {
        return new RegExp(input, 'i').test($(this).text())
    }).show();
});

卡片：

<div class="search">
            <form>
                <label for="live_search">Rechercher une formation :</label>
                <input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
            </form>
        </div>
        <br>
            <div class="container px-5 mb-3">
                <div class="row">
                    {% for formation in formations %}
                        <div class="col-md-4">
                            <div class="card">
                                <img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ formation.title }}</h5>
                                    <p class="card-text">{{ formation.description }}</p>
                                    <a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
                                    <span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

Answer 1

您隐藏了卡片但保留了 col-md-4 div。您可以合并 col-md-4 和 card divs.

Answer 2

只需通过引入“包装器”class（或任何您想要的名称）来隐藏 col-md-4 div

JS代码

$('#live_search').on('keyup', function() {
    let input = $(this).val();
    $('.wrapper').hide();
    $('.wrapper').filter(function() {
        return new RegExp(input, 'i').test($(this).text())
    }).show();
});

卡片

<div class="search">
            <form>
                <label for="live_search">Rechercher une formation :</label>
                <input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
            </form>
        </div>
        <br>
            <div class="container px-5 mb-3">
                <div class="row">
                    {% for formation in formations %}
                        <div class="col-md-4 wrapper">
                            <div class="card">
                                <img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ formation.title }}</h5>
                                    <p class="card-text">{{ formation.description }}</p>
                                    <a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
                                    <span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

Javascript 搜索栏显示空洞代替未显示的卡片

Javascript search bar displaying holes in place of not displayed cards

html

javascript

css

jquery

bootstrap-5