javascript - 使用 jQuery 搜索和过滤 Bootstrap 面板

Question

我有很多(30+)的 Bootstrap 面板，它们如下(每个都有不同的标题和内容):

<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">
        Content
    </div>
    <div class="panel-footer">
        Footer
    </div>
</div>

我有一个搜索输入

<input type="text" id="filter" placeholder="Filter Algorithms">

当有人在过滤框中输入内容时，我想做的是它会搜索面板的标题并根据需要过滤它们。我以前见过这样做，但我不太确定从哪里开始。这是我到目前为止的代码:

$('#filter').keyup(function(){
    $('body').find('.panel-title').find($('#filter').val());
});

Answer 1

试试这个:

var $panels = $('.panel');

$('#filter').on('keyup', function() {
    var val = this.value.toLowerCase();

    $panels.show().filter(function() {
        var panelTitleText = $(this).find('.panel-title').text().toLowerCase();
        return panelTitleText.indexOf(val) < 0;
    }).hide();
});

引用资料

1. jQuery.filter():http://api.jquery.com/filter