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

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

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow asked Oct 8, 2013 at 12:06 Benedict LewisBenedict Lewis 2,82377 gold badges4141 silver badges8181 bronze badges 3

• What do you mean when you say "filters them down as required"? What's the expected behaviour? – André Dion Commented Oct 8, 2013 at 12:09
• Well, if a user enters foo in the input, it hides all panels that don't contain foo in the title. If they change it to bar, it shows all those with bar in the title etc. – Benedict Lewis Commented Oct 8, 2013 at 12:10
• Ok, the hiding functionality is what I was after. – André Dion Commented Oct 8, 2013 at 12:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./filter

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

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