jQuery İle Canlı Arama Uygulaması ve Sonuç Filtreleme

Merhaba arkadaşlar bu yazımızda php ve jquery ile canlı arama uygulaması yapacağız. Bu uygulamamız var olan listeler içerisindeki değerleri kontrol ederek sadece uygun sonuçları filtrelememizi sağlayacaktır. Kodlarımız:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
    </fieldset>
</form>


<nav>
    <ul>
         <li>Zafer Yıldız</li>
         <li>Sarenur Ocaktan</li>
         <li>Sedanur Yıldız</li>
         <li>Sudenur Yıldız</li>
         <li>Ayhan Yıldız</li>
         <li>Makbule Yıldız</li>
         <li>Bedri Kırca</li>
         <li>Emrullah Tanıma</li>
         <li>Fatih Erdoğan</li>
    </ul>
</nav>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
    $("#filter").keyup(function(){
        // Giriş alanındaki metni alıp değerleri sıfırlıyoruz
        var filter = $(this).val(), count = 0;
        // Tablodaki veriler içerisinde gezinerek uygun değer varsa buluyoruz
        $("nav ul li").each(function(){
            // Eğer kelimeye uygun metin yoksa alanı boşaltıyoruz
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
 
            // Eğer eşleşen ifade varsa count değerini 1 artırıyoruz
            } else {
                $(this).show();
                count++;
            }
        });
        // Count değerini güncelliyoruz
        var numberItems = count;
        $("#filter-count").text("Bulunan sonuç = "+count);
    });
});
</script>
</body>
</html>

Yukarıdaki kodları bir not defteri uygulamasına .htm ya da .html uzantısı ile kaydedip bir tarayıcıda açarsanız çalışacaktır.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi

0 YORUM

Bu konuya henüz yorum yapılmamış

Yorum Yap

@COPYRIGHT KodlamakLazım Tüm Hakları Saklıdır.