Filter bootstrap 4 cards

Question

has anyone come across a script that filters bootstrap cards/results on a html page, and sets classes so they become hidden?

Like this: Filter cards in Bootstrap 4 with jQuery (does not work)

I use something like this on a table, but it does not work with a different html. Any ideas?

$(".search").keyup(function () {
        var searchTerm = $(".search").val();
        var listItem = $('.results tbody').children('tr');
        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        $.extend($.expr[':'], {
            'containsi': function (elem, i, match, array) {
                return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
            }
        });

        $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function (e) {
            $(this).attr('class', 'd-none');
        });

        $(".results tbody tr:containsi('" + searchSplit + "')").each(function (e) {
            $(this).attr('class', 'visible');
        });

        var jobCount = $('.results tbody tr[class="visible"]').length;
        $('.counter').text(jobCount + ' (i)');

        if (jobCount == '0') {
            $('.no-result').show();
        }
        else {
            $('.no-result').hide();
        }
    });
});

Scripts like: https://vestride.github.io/Shuffle/ seem too much!

The accepted answer in https://stackoverflow.com/questions/36411163/filter-cards-in-bootstrap-4-with-jquery seems to work — Carol Skelly, Mar 01 '18 at 16:08
Works now it had to have been edited. Did not work before :) — user3795243, Mar 02 '18 at 17:19

Filter bootstrap 4 cards

0 Answers0