Jquery ile Anlık Arama/Filtreleme

Sunucu tarafında arama yapmanıza gerek kalmayacak kadar uzun listeleme yaptığınız içeriği, doğrudan Jquery ile Anlık Arama/Filtreleme yapmak için basit bir kod parçacığı yazdım. Bir script için çalışan listesini tek seferde listeliyorum, bu listede aradığımı bulmak için sunucu tarafı filtreleme yavaş kaldı. İşlemi tarayıcı tarafında yapmak için tüm listeyi tarayıcıya gönderip, arama kutusunun change olayını yakalayarak gizleme gösterme işlemi yapıyorum.

Sayfada html olarak bir arama kutusu, kaç adet içerik görüntülendiğini yazacak div, birde liste olduğunu varsayarsak;

<div><input type="text" id="search" placeholder="Filtrelemek için Birşeyler yazın"></div>
<div class="counter">Toplam <strong>4</strong> kişi gösteriliyor</div>
<div class="container">
	<div class="containeritem">Ali <i>(senior)</i></div>
	<div class="containeritem">Ahmet <i>(junior)</i></div>
	<div class="containeritem">Veli <i>(danısman)</i></div>
	<div class="containeritem">Derya <i>(senior)</i></div>
</div>

Jquery ile search id li alana girilen değerleri containeritem sınıfına ait olan içeriklerde arayacağız. Bu containeritem elementi içerisinde başka elementler var ise onlarda da arayacak;

$('#search').keyup(function () {
            if ($('#search').val().length < 2) {
                var tg = $('.containeritem');
                tg.show();
                $(".counter").html("Toplam <strong>" + tg.length + "</strong> kişi gösteriliyor");
                return;
            }
            $('.containeritem').hide();

            var txt = $('#search').val();
            $('.containeritem').each(function () {
                if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
                    $(this).show();
                }
            });
            var t = $('.containeritem:visible');
            $(".counter").html("Toplam <strong>" + t.length + "</strong> kişi gösteriliyor");
        });

Oldukça basit bi yöntem. Çalışan örneğini burdan indirebilirsiniz.

Kolay gelsin.

1 Comment

  1. Allah senden razı olsun ya şunu bulana kadar canım çıktı eline sağlık.
    yalnız küçük bir ricam olacak bu filtrelemeyi “il, ilçe, semt ve kategori” select boxına yada dropdownına nasıl ilişkilendirebiliriz.?
    yani il ilçe semt kategori (butonları ile) filtreleriyle yapılan ve filtrelemeye uygun kartlar nasıl listelenir yardımcı olursanız çok sevinirim şimdiden teşekkür ederim

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir