Twitter Bootstrap Row Filter / Search Box

Question

I\'m having trouble finding a tutorial on how to create a simple search query, or row filter, for Twitter Bootstrap. I\'ve tried many, I\'m not sure if I\'m doing something wron

Answer 1

Here's what I use:

$('input.filter').live('keyup', function() {
    var rex = new RegExp($(this).val(), 'i');
    $('.searchable tr').hide();
        $('.searchable tr').filter(function() {
            return rex.test($(this).text());
        }).show();
    });

To use it, you just create a table, with a tbody with the class "searchable" and then an input with class "filter" somewhere on your page (I prefer to put them in a Bootstrap Popup behind a search icon).

Answer 2

This is live example of solution provided by Filipp Lepalaan. Many thanks for this small and perfect code.

Example

$(document).ready(function () {

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

}(jQuery));

});