如何根据搜索框筛选 bootstrap 个卡片

Question

我使用 Laravel 5.8 创建了一个应用程序。请在继续阅读之前向下滚动以查看图片，这将有助于我解释问题。

搜索框用于在 <H5> 标签中查找匹配的文本，然后隐藏任何 recipe-card ID div。

有两个问题：

当我搜索时，div 没有折叠。
一些元素，例如带有井号标签的卡片页脚也被删除了。这不是故意的。

我希望有人可以帮助我解决 JavaScript 我需要用来完成此任务的问题。

搜索标题（H5 标签）
隐藏所有没有搜索条件的食谱卡。

Laravel view.blade.php to show my recipe cards

<div class="container">
<div class="row pb-4">
    <div class="col-12">
        <input type="text" name="searchbox" id="searchbox" class="filterinput form-control" placeholder="Search recipe titles and tags...">
    </div>
</div>

<div class="row">
    @foreach ($recipes as $recipe)
    <div class="col-lg-4 pb-4" id="recipe-card">
        <div class="card h-100">
            <a href="/recipes/{{ $recipe->id}}"><img class="card-img-top " src="{{ $recipe->imgurl}}" alt="{{ $recipe->name }}"></a>
            <div class="card-body">
                <h5 class="card-title"><a href="/recipes/{{ $recipe->id}}"> {{ $recipe->name }} </a> {{ $recipe->favourite == 'Yes' ? ' Fav' : '' }} </h5>
                <p class="card-text">
                    <span id="">Time:{{ $recipe->totaltime }}</span>
                </p>
                <p class="card-text">
                    <span id="">Type:{{ $recipe->mealtype }}</span>
                </p>
            </div>
            <div class="card-footer text-muted text-truncate">
                <span class="badge badge-secondary">{{ $recipe->tags }}</span>
            </div>
        </div>
    </div>

    @endforeach

</div>

Here is the JavaScript that I currently use to filter:

<script>
$(document).ready(function() {
    $("#searchbox").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#recipe-card div").filter(function() {
            $(this).toggle($(this).find('h5').text().toLowerCase().indexOf(value) > -1)
        });
    });
});
</script>

上面的代码产生了这个：

Before using search

After searching for recipes with titles (H5 tags) of "bowl"

Answer 1

您的 select 或 #recipe-card div 实际上并没有按照您的意愿行事。它不是抓取卡片中的第一个 div，而是抓取卡片中的 all divs。

此外，您应该避免为多张卡片重复使用相同的 ID，而是使用数据角色之类的东西。 ID 应该是唯一的，因此拥有多个相同的 ID 通常是不好的做法。

如果您改用 data-role="recipe" 之类的东西，您可以使用 select 或：

$('div[data-role="recipe"] div:first)

或者，只需在您的内部 div 上放置一个数据角色，然后简单地 select 该元素。

这可能无法解决您的所有问题，但请从这里开始，如果还有任何问题请告诉我。

OP 附加了以下 JS 解决方案，并将其标记为正确答案：

<script>
$(document).ready(function() {
    $("#searchbox").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $('div[data-role="recipe"]').filter(function() {
            $(this).toggle($(this).find('h5').text().toLowerCase().indexOf(value) > -1)
        });
    });
});
</script>

Answer 2

列不应全部具有相同的 ID。此外，jQuery 代码应该隐藏列 (col-lg-4)，而不是卡片。在 jQuery...

中有很多不同的处理方法

$('#searchbox').keyup(function (){
    $('.col-lg-4').removeClass('d-none');
    var filter = $(this).val();
    if (filter && filter.length>0){
        $('.row').find('.col-lg-4 .card-body h5:not(:contains("'+filter+'"))').parentsUntil('.col-lg-4').parent().addClass('d-none');
    }
});

演示：https://codeply.com/go/IWKdFu4xIJ

Answer 3

试试这个：

$('#searchbox').on("keyup", function() {
        $('.card').show();
        var filter = $(this).val(); 
        $('#recipe-card').find(".card-title:not(:contains(" + filter + "))").parent().css('display','none');
    });

如果您希望卡片在过滤后折叠到正确的位置，您可以考虑使用 bootstrap 的 "card-columns" 或 "card-deck" 类进行布局。

如何根据搜索框筛选 bootstrap 个卡片

How to filter bootstrap cards based on search box

javascript

jquery

bootstrap-4

laravel-5.8