JQuery ile Listede Arama Yapmak

Bu yazımızda Jquery ile sıralı ve sırasız listelerde nasıl arama işlemi gerçekleştirebiliriz onu öğreneceğiz. Projelerimizde listeleme işlemini çok sık kullanıyoruz. Bazı durumlarda bu listelerde arama yapma ihtiyacı oluşabiliyor. Bu gibi durumlarda yardımcı olması için küçük bir uygulama yapalım.

Uygulamamızda Bootstrap versiyon 4.1.3’i CDN olarak sayfamıza ekleyip class’larından faydalandım.

Burada arama yapmak için bir input etiketi ve listelemek için de bir <ul><li></li></ul> yapısında liste oluşturdum.

Listeleme etiketleri ile ilgili eksikleriniz olduğunu düşünüyorsanız Html Listeleme Etiketleri – ul Etiketi – ol Etiketi yazımı okuyabilirsiniz.

İnputun keyup olayında yani klavyede bir tuşa basılıp kaldırılma anında, listenin elemanlarında (<li></li>)  var olup olmama durumunu kontrol ediyoruz.

Varolanlar görünmeye devam ederken olmayanlarıda Jquery toggle metodu ile gizliyoruz.

Uygulamayı incelediğinizde daha anlaşılır olacaktır.

Html Kodları

Css Kodları

Jquery Kodları

Uygulamamızın Son Hali

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

JQuery ile Tabloda Arama Yapmak

JQuery ile Kalan Karakter Sayısı Uygulaması

Yeni bir yazımda görüşmek üzere.

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +