jQuery Filter – Liste Filtreleme İşlemi

Değerli dostlarım merhabalar, bu örnek uygulamamızda jQuery ile liste elemenları arasında nasıl arama yapılır? onu öğreneceğiz.

Mutlaka hepimiz sahibinden.com‘a girip ilan aramışızdır. İlanları filtrelemek için il ve ilçede seçebilmekteyiz. İl seçimi yaparken listeyi baştan sona gezmek yerine arama kutucuğuna ili yazarız ve il listesi filtrelenir.

Örneğimizi daha iyi anlamak için buraya tıklayıp canlı olarak görebilirsiniz. Eğer dosyayı indirmek istiyorsanız buraya tıklayıp proje dosyasını indirebilirsiniz.

Html Kodumuz

Şimdi ilk olarak Html dosyamızı oluşturalım ve listemizi oluşturalım.

<h2>Listeyi Filtrele</h2>
<p>Aşağıdaki kutucuğa listede yer alan bir elemanı yazın</p>
<input id="txtAra" type="text" placeholder="Ara...">
<br>
<ul id="liste">
 <li>Ankara</li>
 <li>Antalya</li>
 <li>İstanbul</li>
 <li>İzmir</li>
 <li>Muğla</li>
 <li>Ordu</li>
 <li>Samsun</li>
</ul>

jQuery Kodumuz

Html sayfamızı oluşturduktan sonra yine aynı sayfa içerisinde <script> etiketleri arasına aşağıdaki jQuery kodlarımızı yazalım ve kaydedelim.

$(document).ready(function(){
 $("#txtAra").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#liste li").filter(function() {
   $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
 });
});

Sayfamızı çalıştırdığımızda kutucuğa yazdığımız iller içerisinde jQuery kodlarımız arama yapacaktır. Eşeleşen bir il olduğunda listeyi filtreleyecektir.

Bu örnek uygulamamız bu kadardı dostlar. Diğer bir örnek uygulamamızda görüşmek üzere.

Bir cevap yazın

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

Shares