jQuery ile gerçek zamanlı arama filtresi uygulaması {HTML}

Merhaba. Bu makelemizdeki uygulamamızda kullanıcı dostu bir tablonun içerisinde gerçek zamanlı arama işlemi nasıl yapılır, bunu inceleyeceğiz.

Örneğin basit bir HTML data tablomuz olduğunu varsayalım. Bu tablomuzun hemen üzerinde bir arama kutumuz olsun. Sistemimizden de metin kutusuna yazdığımız kayıtları öne çıkarmasını isteyelim. Bu işlemi yaparken herhangi bir GET yada POST işlemi kullanmayacağız. jQuery yardımıyla arama işlemini gerçekleştireceğiz. (Real Time Search)

<input type="text" id="search" placeholder="Type to search">
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Demo : http://jsfiddle.net/7BUmG/2/

Dikkat: Real time arama sistemleri POST veya GET yardımıyla gerçekleşen arama işlemlerine göre performanslı olarak görünebilir ancak bu işlem küçük data görüntülenmelerinde kullanılmalıdır. Büyük ve uzun datalar barındıran sistemlerin arama işlemlerinde veritabanından doğrudan arama işlemi gerçekleştirmelisiniz.