Twitter Bootstrap 行过滤器/搜索框

Posted 2023-02-23

【中文标题】Twitter Bootstrap 行过滤器/搜索框

【英文标题】：Twitter Bootstrap Row Filter / Search Box

【发布时间】：2013-01-20 17:44:40

【问题描述】：

我找不到有关如何为 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”，我是新来的。

【参考方案1】：

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

);

【讨论】：

谢谢。这对我帮助很大。

如果我没有该项目，我需要在列表中显示“添加新”你能帮我吗？？

【参考方案2】：

这是我使用的：

$('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，然后在页面某处输入一个带有“过滤器”类的输入（我更喜欢将它们放在搜索图标后面的引导弹出窗口中） .

【讨论】：

先生。我不知道您是否还在，但上面的代码为我节省了数小时的挫败感。谢谢！！

不错的sn-p。很有用！

使用 jQuery > 1.7 .live() 应该是 .on()。

如果我没有该项目，我需要在列表中显示“添加新”你能帮我吗？？

天啊！你不知道这为我节省了多少，我几天来一直在寻找这样的解决方案，没有人能帮助我。谢谢谢谢谢谢谢谢