Bộ lọc dòng khởi động Twitter/Hộp tìm kiếm

Question

Tôi đang gặp khó khăn khi tìm hướng dẫn về cách tạo truy vấn tìm kiếm đơn giản hoặc bộ lọc hàng, cho Twitter Bootstrap. Tôi đã thử nhiều, tôi không chắc chắn nếu tôi đang làm điều gì đó sai hoặc các plugin không tương thích với Bootstrap. Vui lòng giúp đỡ nếu bạn có thể.

Tôi đã thử:

$(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"}); 
}); 

Không có gì với điều này ... Có lẽ tôi đang thiếu bất kỳ "id" trên bàn của tôi hoặc hộp tìm kiếm, tôi mới với điều này.

Answer 1

Đây là những gì tôi sử dụng:

$('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(); 
    }); 

Để sử dụng nó, bạn chỉ cần tạo một bảng, với một tbody với lớp "tìm kiếm" và sau đó một đầu vào với lớp "bộ lọc" ở đâu đó trên trang của bạn (I thích đặt chúng trong Bootstrap Popup phía sau biểu tượng tìm kiếm).

Answer 2

Đây là ví dụ trực tiếp về giải pháp do Filipp Lepalaan cung cấp. Rất cám ơn vì mã nhỏ và hoàn hảo này.

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

});