内容简介:代码日志版权声明:翻译自:http://stackoverflow.com/questions/14713622/twitter-bootstrap-row-filter-search-box
我无法找到关于如何为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中).
代码日志版权声明:
翻译自:http://stackoverflow.com/questions/14713622/twitter-bootstrap-row-filter-search-box
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。