Bootstrap 4 cards filtering with jQuery

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/50005223/bootstrap-4-cards-filtering-with-jquery