使用jQuery在Bootstrap 4中过滤卡片

我正在尝试使用bootstrap 4的新卡组件创建一个由许多卡填充的页面。

我想创建一个搜索栏，搜索时会筛选出标题与搜索查询不匹配的卡片。

这是我想到的东西。 Plunker

我希望这些卡片能够display: none一个display: none ，或opacity:0如果它们不匹配。

我目前正在尝试编写一个函数，搜索栏的onChange执行此操作。 我会发布，如果我能弄明白的话。

我也试过使用内置代码段function。

    
 
 
  
 
 
 
 
 
 
 
 
 
Card title that wraps to a new line
 
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
 
 
 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
 
  Someone famous in Source Title  
 
 
 
 
 
Card title
 
This card has supporting text below as a natural lead-in to additional content.
 
Last updated 3 mins ago 
 
 
 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
 
  Someone famous in Source Title  
 
 
 
 
Card title
 
This card has supporting text below as a natural lead-in to additional content.
 
Last updated 3 mins ago 
 
 
 
 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
 
  Someone famous in Source Title  
 
 
 
 
Card title
 
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
 
Last updated 3 mins ago 
 
 
  

Answer 1

这是一个快速示例，说明如何使用jQuery的contains选择器来完成它：

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

目前这是设置为在更改搜索输入时发生，您可能需要设置一个提交按钮并将其激活提交。

Bootply示例