JQuery ile Listede Arama Yapmak

Merhaba Arkadaşlar,
Bu makalede, Jquery ile listelerde (<ol><li></li></ol>, <ul><li></li></ul>) 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.Burda arama yapmak için bir <input> ve listelemek için de bir <ul><li></li></ul> yapısında liste oluşturdum.İnput’un 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 toggle metodu ile gizliyoruz.Uygulamayı incelediğinizde daha anlaşılır olacaktır.Kodlarımız şu şekilde;

JQuery ile Tabloda Arama Yapmak ve JQuery ile Kalan Karakter Sayısı Uygulamasımakaleleride ilginizi çekebilir.

Yeni bir makalede görüşmek üzere.

Leave a Reply

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