如何根據搜索框過濾引導卡

Question

我使用 Laravel 5.8 創建了一個應用程序。 在繼續閱讀之前，請向下滾動以查看圖像，這將有助於我解釋問題。

搜索框旨在查找<H5>標簽內的匹配文本，然后隱藏任何recipe-card ID div。

有兩個問題：

1. 當我搜索時，div 不會折疊。
2. 一些元素，比如帶有哈希標簽的卡片頁腳也會被刪除。 這不是故意的。

我希望有人可以幫助我解決我需要使用的 JavaScript 來完成此任務。

• 搜索標題（H5 標簽）
• 隱藏所有沒有搜索條件的食譜卡。

Laravel view.blade.php 顯示我的食譜卡

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

這是我目前用於過濾的 JavaScript：

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

上面的代碼產生這個：

使用搜索之前

搜索標題（H5 標簽）為“碗”的食譜后

Answer 1

您的選擇器#recipe-card div實際上並沒有按照您的意願行事。 它不是抓取卡片內的第一個 div，而是抓取卡片內的所有div。

此外，您應該避免對多張卡重復使用相同的 ID，而是使用類似數據角色的東西。 ID 應該是唯一的，因此擁有多個相同的 ID 通常是不好的做法。

如果您改為使用data-role="recipe" ，則可以使用此選擇器：

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

或者，只需在內部 div 上放置一個數據角色，然后專門選擇該元素。

這可能無法解決您的所有問題，但從這里開始，如果還有任何問題，請告訴我。

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');
    });

如果您希望卡片在過濾后折疊到正確的位置，您可以考慮使用引導程序的“卡片列”或“卡片組”類進行布局。