Twitter Bootstrap行筛选器/搜索框

Question

我无法找到有关如何为Twitter Bootstrap创建简单搜索查询或行筛选器的教程。我尝试了很多，我不知道我是否做错了什么，或者插件与Bootstrap不兼容。如果可以的话请帮忙。

我已经试过：

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

自认倒霉......也许我失去了我的表或搜索框的任何“身份证”，我是新与此有关。

Answer 1

这是我使用：

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

要使用它，你只需要创建一个表，与A类TBODY“搜索”，然后用类输入“过滤器”的地方你的页面（我的宁愿将它们放在搜索图标后面的Bootstrap Popup中）。

Answer 2

这是Filipp Lepalaan提供的解决方案的实例。非常感谢这个小而完美的代码。

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

}）;