Bootstrap 4 cards filtering with jQuery

Question

Someone has had a dig at this before, but I don't seem to be able to make it work. I'm trying to filter cards on Bootstrap 4 and when I apply a search query, it ends up hiding all my cards, instead of just the ones it should.

Hopefully anyone can help.

  $('#search').keyup(function() {
    $('.card').show();
    var filter = $(this).val(); // get the value of the input, which we filter on
    $('.card-deck').find('.card .card-body h4:not(:contains(" + filter + "))').parent().parent().addClass('d-none');
  })

Here's the full code: https://jsfiddle.net/8120104x/#&togetherjs=jTm0prUR4S

The fiddle doesn't include bootstrap or jquery – Carol Skelly Apr 24 '18 at 15:25 — Carol Skelly, Apr 24 '18 at 15:25

score 3 · Accepted Answer · answered Apr 24 '18 at 15:28

3

The problem is that $('.card').show(); won't work because once d-none is added it overrides the display:block added by $('.card').show();. Each keyup should remove the d-none class instead...

$('#search').keyup(function (){
    $('.card').removeClass('d-none');
    var filter = $(this).val(); // get the value of the input, which we filter on
    $('.card-deck').find('.card .card-body h4:not(:contains("'+filter+'"))').parent().parent().addClass('d-none');
})

Working demo on Codeply

Note: jQuery :contains is case-sensitive.

answered Apr 24 '18 at 15:28

Carol Skelly

351,302
90
710
624

Right, that's why it didn't make sense. How do I make the query search insensitive? – Christian Apr 24 '18 at 15:35
I would've spent years trying to solve this whole issue. Thank you! – Christian Apr 24 '18 at 15:39

Bootstrap 4 cards filtering with jQuery

1 Answers1

Linked