3

Bootstrap パネルがたくさん (30 以上) あります。これらは次のとおりです (それぞれタイトルと内容が異なります)。

<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());
});
4

2 に答える 2

5

これを試して：

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
于 2013-10-08T12:14:17.510 に答える
0

この jquery プラグインは役に立つかもしれません: http://labs.easyblog.it/jquery-filterbox/

$('#list').filterbox({
        container: '.list-group',
        child: '.list-group-item',
        childKey: '.list-group-item > .title'
    });
于 2014-02-24T09:26:41.027 に答える