html – Twitter Bootstrap行过滤器搜索框

概述我无法找到关于如何为Twitter Bootstrap创建简单搜索查询或行过滤器的教程.我尝试了很多,我不知道我做错了什么,或插件与Bootstrap不兼容.如果可以的话请帮忙. 我试过了： $(document).ready(function() { //Declare the custom selector 'containsIgnoreCase'. $.expr[':'].co


我无法找到关于如何为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”,我是新的.

解决方法 这是我使用的：

$('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,然后在页面上某处的类“filter”的输入(我更喜欢将它们放置在搜索图标后面的bootstrap Popup中).

总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap行过滤器/搜索框全部内容，希望文章能够帮你解决html – Twitter Bootstrap行过滤器/搜索框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。