使用jQuery在Bootstrap 4中筛选卡片。

Question

我正在尝试创建一个页面，使用Bootstrap 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="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>

- Xgongiveittoya

---

你想通过什么进行过滤？标题？文本？ - APAD1

暂时没有标题，抱歉，我以为我已经加上了。 - Xgongiveittoya

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示例

- APAD1

---

完美，正是我所需要的，我以前从未使用过包含选择器。谢谢！ - Xgongiveittoya

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - APAD1

这段代码没有重置过滤器的方法，以便显示所有的卡片。此外，在过滤卡片时，标题也不会显示。 - NoChance

@APAD1 这看起来非常有用，如果您清空了搜索字符串，您将如何将它们重置回正常状态？ - petworthnick

Answer 2

以下是一些现代的选项，适用于 Bootstrap 4 或 Bootstrap 5...

Bootstrap 5（使用 JavaScript）

var buttonUp = () => {
    const input = document.querySelector(".searchbox-input");
    const cards = document.getElementsByClassName("card");
    let filter = input.value
    for (let i = 0; i < cards.length; i++) {
        let title = cards[i].querySelector(".card-body");
        if (title.innerText.indexOf(filter) > -1) {
            cards[i].classList.remove("d-none")
        } else {
            cards[i].classList.add("d-none")
        }
    }
}

演示

Bootstrap 4（使用jQuery）

// this overrides `contains` to make it case insenstive
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

var buttonUp = () => {
    $('.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');
}

演示

- Zim

Answer 3

这里有一个简单的解决方案。

$(document).ready(function(){
  $('.searchbox-input').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".card").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

- Daniel Wear

Answer 4

$(document).ready(function() {
    $('#searchForm').keyup(function(){
        search_text($(this).val());
    });

    function search_text(value){
        $('#search_section .card').each(function(){
            var found = 'false';
            $(this).each(function(){
                if($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
                {
                    found = 'true';
                }
            });
            if(found == 'true'){
                $(this).show()
            }
            else {
                $(this).hide();
            }
        })
    }
});

- Ricki Capelli