Как отфильтровать загрузочные карты на основе окна поиска

Question

Я создал приложение, используя Laravel 5.8.Пожалуйста, прокрутите вниз, чтобы увидеть изображения, прежде чем продолжить читать, это поможет мне объяснить проблему.

Поле поиска предназначено для поиска соответствующего текста в тегах <H5>, а затем для скрытия любых дивизий recipe-card ID.

Есть две проблемы:

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

Столбцы не должны иметь одинаковый идентификатор. Кроме того, код 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://www.codeply.com/go/IWKdFu4xIJ

Answer 2

Ваш селектор #recipe-card div на самом деле не делает то, что вы хотите. Вместо того, чтобы захватывать первый div внутри карты, он захватывает все div внутри карты.

Кроме того, вам следует избегать повторного использования одного и того же идентификатора для нескольких карт и использовать что-то вроде роли данных. Предполагается, что идентификаторы являются уникальными, поэтому использование нескольких идентичных идентификаторов обычно является плохой практикой.

Если вы вместо этого использовали что-то вроде data-role="recipe", вы можете использовать этот селектор:

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

ИЛИ просто поместите роль данных на свой внутренний блок и просто выберите этот элемент специально.

Это может решить не все ваши проблемы, но начните с этого и дайте мне знать, если что-нибудь останется.

Нижеприведенное решение JS было добавлено OP, и это помечено как правильный ответ:

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