CODEWITHSUNDEEP
htmltwitter-bootstrapsearchfilter
user2044129
user2044129

Reputation: 153

Twitter Bootstrap Row Filter / Search Box

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 wrong or the plugins are not compatible with Bootstrap. Please help if you can.

I've tried:

$(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#search").keyup(function(){

          $("#tabela").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#tabela").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
});

Nothing with this... Maybe I'm missing any "id" on my table or search box, I'm new with this.

Upvotes: 14

Views: 23256

Answers (2)

GiorgiTBS
GiorgiTBS

Reputation: 369

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

});

Upvotes: 21

Filipp Lepalaan
Filipp Lepalaan

Reputation: 461

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

Upvotes: 46

Related Questions