使用 jQuery 在 Bootstrap 4 中过滤卡片

本文介绍了使用 jQuery 在 Bootstrap 4 中过滤卡片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用引导程序 4 的新卡片组件创建一个由许多卡片填充的页面.

我想创建一个搜索栏，在搜索时过滤掉标题与搜索查询不匹配的卡片.

这是我想到的一个plunker.Plunker

如果卡片不匹配，我希望卡片获得类似于 display: none 或 opacity:0 的内容.

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

我也尝试使用内置的代码段功能.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script><link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/><div class="容器"><div class="row"><div class="col-sm-4"><input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();"需要>

<div class="col-sm-4">

$('.searchbox-input').change( function () {$('.card').show();var filter = $(this).val();//获取输入的值，我们对其进行过滤$('.container').find(".card-title:not(:contains(" + filter + "))").parent().css('display','none');});

Bootply 示例

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 out cards whose titles don't match the search query.

Here is a plunker of what I have in mind. Plunker

I would like the cards to get something like a display: none, or opacity:0 if they don't match.

I currently am attempting to write a function that onChange of the search bar does this. I'll post if I can get it figured out.

I've tried to use the built in snippet feature as well.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
  </div>
  <div class="card-columns">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title that wraps to a new line</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card card-block">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card card-block card-inverse card-primary text-xs-center">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
        <footer>
          <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card card-block text-xs-center">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
    <div class="card">
    </div>
    <div class="card card-block text-xs-right">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
        </footer>
      </blockquote>
    </div>
    <div class="card card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">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.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

解决方案

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.

卡片