Filter cards in Bootstrap 4 with jQuery

Question

I am attempting to create a page that is populated by many cards, using bootstrap 4\'s new card component.

I want to create a search bar, that when searched, filters ou

Answer 1

Here's a quick example of how you could do it using jQuery's contains selector:

$('.searchbox-input').change( function () {
    $('.card').show();
    var filter = $(this).val(); // get the value of the input, which we filter on
    $('.container').find(".card-title:not(:contains(" + filter + "))").parent().css('display','none');
});

Currently this is set up to happen on change of the search input, you would probably want set up a submit button and have it fire on submit instead.

Bootply Example