如何在Bootstrap Card组/卡中实现搜索功能？

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card标题</h5>
    <p class="card-text">Card内容</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card标题</h5>
    <p class="card-text">Card内容</p>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card标题</h5>
    <p class="card-text">Card内容</p>
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="搜索" id="search-input">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('#search-input').on('input', function() {
      var searchText = $(this).val().toLowerCase();
      $('.card').each(function() {
        var cardText = $(this).find('.card-text').text().toLowerCase();
        if (cardText.indexOf(searchText) === -1) {
          $(this).hide();
        } else {
          $(this).show();
        }
      });
    });
  });
</script>