Bootstrap 4 карты фильтрации с помощью jQuery

Question

Кто-то уже копал это раньше, но я не могу заставить его работать.Я пытаюсь отфильтровать карты в Bootstrap 4, и когда я применяю поисковый запрос, он в итоге скрывает все мои карты, а не только те, которые должны.

Надеюсь, что любой может помочь.

  $('#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');
  })

Вот полный код: https://jsfiddle.net/8120104x/#&togetherjs=jTm0prUR4S

Answer 1

Проблема в том, что $('.card').show(); не будет работать, потому что после добавления d-none он переопределяет display:block, добавленный $('.card').show();.Каждый keyup должен удалить класс d-none вместо ...

$('#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');
})

Рабочая демонстрация на Codeply

Примечание: jQuery :contains isчувствителен к регистру .