14

我找不到有关如何为 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"});
});

没有这个......也许我在我的桌子或搜索框中缺少任何“id”，我是新来的。

4

2 回答 2

46

这是我使用的：

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

要使用它，您只需创建一个表，其中包含一个带有“可搜索”类的 tbody，然后在页面某处输入一个带有“过滤器”类的输入（我更喜欢将它们放在搜索图标后面的引导弹出窗口中）。

于 2013-02-19T08:06:00.677 回答
21

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

例子

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

});

于 2014-02-03T19:30:11.947 回答