html – Twitter Bootstrap行過濾器/搜尋框

我無法找到關於如何為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中).