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

$(document).ready(function() {
    $('#searchForm').keyup(function(){
        search_text($(this).val());
    });

    function search_text(value){
        $('#search_section .card').each(function(){
            var found = 'false';
            $(this).each(function(){
                if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
                {
                    found = 'true';
                }
            });
            if(found == 'true'){
                $(this).show()
            }
            else {
                $(this).hide();
            }
        })
    }
});

Answer 2

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

Answer 3

Here is the simple solution.

$(document).ready(function(){
  $('.searchbox-input').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".card").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});