Html Twitter Bootstrap 行过滤器/搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14713622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Row Filter / Search Box
提问by user2044129
I'm having trouble finding a tutorial on how to create a simple search query, or row filter, for Twitter Bootstrap. I've tried many, I'm not sure if I'm doing something wrong or the plugins are not compatible with Bootstrap. Please help if you can.
我找不到有关如何为 Twitter Bootstrap 创建简单搜索查询或行过滤器的教程。我尝试了很多，我不确定是我做错了什么还是插件与 Bootstrap 不兼容。如果可以的话请帮忙。
I've tried:
我试过了：
$(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"});
});
Nothing with this... Maybe I'm missing any "id" on my table or search box, I'm new with this.
与此无关......也许我的表格或搜索框中缺少任何“ID”，我是新来的。
回答by Filipp Lepalaan
Here's what I use:
这是我使用的：
$('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();
});
To use it, you just create a table, with a tbody with the class "searchable" and then an input with class "filter" somewhere on your page (I prefer to put them in a Bootstrap Popup behind a search icon).
要使用它，您只需创建一个表，其中包含一个类为“searchable”的 tbody，然后在页面上的某个位置输入一个类为“filter”的输入（我更喜欢将它们放在搜索图标后面的 Bootstrap 弹出窗口中）。
回答by GiorgiTBS
This is live example of solution provided by Filipp Lepalaan. Many thanks for this small and perfect code.
这是 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));
});
});
