jQuery ile Hızlı Filtreleme Yapımı (Türkçe Karakter Uyumlu)

Merhabalar, bu içeriğimizde Javascript dilinin kuşkusuz en önemli kütüphanelerinden biri olan jQuery ile çok hızlı çalışan ve Türkçe karakterle tamamen uyumlu bir filtreleme sistemi yapacağız.

Öncelikle jQuery kütüphanemizi sayfamıza dahil ettiğimizden emin olmamız gerekiyor. jQuery kütüphanesine ulaşmak için buraya tıklayabilirsiniz. jQuery kütüphanesini dahil ettikten sonra ilk olarak arama yapacağımız inputumuzu yazmamız gerekiyor.

<input id="filter" type="text" autocomplete="off" value="" maxlength="200" placeholder="jQuery ile ara.."> <!-- inputumuza filter id'sini tanımlıyoruz. -->
<div id="result-alert"></div>

Sonuçların özetini göstermek için “d-none” classı tanımladım ve bu class’a css ile “display:none” özelliğini vereceğiz. (Eğer Bootstrap kütüphanesi kullanıyorsanız d-none sınıfı zaten sizde aynı işlevi gösterecektir, bu sebepten tekrar stil dosyanızda tanımlamanıza gerek yoktur.)

.d-none { display:none }

Daha sonrasında ise arama yapacağımız html ögelerini yazmalıyız. Bu örnekte ben bir liste kullanacağım ancak siz div,span,li,p, vb. bütün html içeriklerde arama yaptırabilirsiniz.

<ul id="results"> <!-- en üst elemanımız olan ul'ye results id'sini veriyoruz -->
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Example List</li>
  <li>3 example 5 list</li>
  <li>Lquae inventore praesentium.</li>
</ul>

Ve son olarak jQuery kodlarımızı yazmaya başlıyabiliriz.

jQuery("#filter").keyup(function () { // inputumuzdaki klavye hareketlerini kontrol ederek fonksiyonumuza başlıyoruz
        let alert = $('#result-alert'); // özeti gösterecek alanımızı alert değişkenine atadık
        let filter = jQuery(this).val().toLocaleLowerCase(); // inputumuza girilen veriyi türkçe karakterlere uyumlu şekilde küçük harflere dönüştürerek değişkene aktarıyoruz
        if(filter.length>0){ // eğer inputa veri girilmişse özet kısmımızdaki display none özelliğini veren sınıfı kaldırıyoruz
            alert.removeClass('d-none');
        }else {
            alert.addClass('d-none'); // veri silinirse tekrar ekliyoruz
        }
        jQuery("#results li").each(function () { // results idli elemanımızın altındaki tüm liste elemanlarımız için bir kontrol yazıyoruz
            if (jQuery(this).text().toLocaleLowerCase().search(new RegExp(filter, "i")) < 0) { 
                jQuery(this).hide();
                alert.html("Toplam <b>"+$('li:visible').length+"</b> adet sonuç gösteriliyor."); // sonuç sayısını yazdırıyoruz
            } else {
                jQuery(this).show();
                alert.html("Toplam <b>"+$('li:visible').length+"</b> adet sonuç gösteriliyor."); // sonuç sayısını yazdırıyoruz
            }
        });
    });

jQuery ile Türkçe karakterlerle herhangi bir sorun yaşamayacak filtreleme sistemimiz hazır. Bu kodları dilediğiniz gibi geliştirip projelerinizde uygulayabilirsiniz.

Kodlarımızın çalıştığını görmek için demoya göz atabilirsiniz.

Diğer yazılarıma göz atmak için tıklayın.

Web sitesine mi ihtiyacınız var ?