CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Benedict Lewis
Benedict Lewis

Reputation: 2813

Search and Filter Bootstrap Panels using jQuery

I have lots(30+) of Bootstrap panels, which are as follows (each has a different title and content):

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

And I have a search input

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

What I want to do it when someone types into the filter box it searches the title of the panels and filters them down as required. I have seen this done before, but I'm not quite sure where to start. This is the code I have so far:

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

Upvotes: 3

Views: 5575

Answers (2)

stefcud
stefcud

Reputation: 2315

this jquery plugin could be useful: https://github.com/Mixtags/jquery-filterbox

$('#list').filterbox({
        container: '.list-group',
        child: '.list-group-item',
        childKey: '.list-group-item > .title'
    });

Upvotes: 0

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

Try this:

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

References

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

Upvotes: 5

Related Questions