Как мне адаптировать этот код, чтобы отображать <div>No Results Found</div> на странице, когда результаты не найдены?

У меня есть эта простая галерея изображений с входом для фильтрации результатов на основе содержимого атрибута data-filter:

<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
    <div class="gallery-thumbnail" data-filter="Apple">image</div>
    <div class="gallery-thumbnail" data-filter="Orange">image</div>
    <div class="gallery-thumbnail" data-filter="Banana">image</div>
</div>

И jQuery:

$("#filter").keyup(function() {
    var value = $(this).val().toLowerCase();
    $(".gallery-thumbnail").filter(function() {
        $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
    });
});
0
Jeff 8 Окт 2021 в 15:12

2 ответа

Лучший ответ

Вы можете использовать тот же метод и сделать это так:

$(document).ready( function(){
    $("#filter").keyup( function(){
        var value = $(this).val().toLowerCase();
        $(".gallery-thumbnail").filter(function() {
            $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
        });
        $('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
    });
});

< Сильного > Demo

$(document).ready( function(){
    $("#filter").keyup( function(){
        var value = $(this).val().toLowerCase();
        $(".gallery-thumbnail").filter(function() {
            $(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
        });
        $('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
    <div class="gallery-thumbnail" data-filter="Apple">image</div>
    <div class="gallery-thumbnail" data-filter="Orange">image</div>
    <div class="gallery-thumbnail" data-filter="Banana">image</div>
    <div class="noresult" style="display:none">No Results Found</div>
</div>
1
Carsten Løvbo Andersen 8 Окт 2021 в 12:16

Вы помещаете на страницу div «Нет результатов» с классом, который изначально по умолчанию скрывает его (display:none). Если ваш фильтр не возвращает результатов, вы добавляете класс в div, чтобы показать его (display: block). Когда фильтр очищен и у вас снова есть результаты, вы удаляете класс «show», возвращая его обратно в его «скрытое» состояние по умолчанию.

0
Steve -Cutter- Blades 8 Окт 2021 в 12:19