Bir listede anlık filtreleme yapmaya yarayan jquery örneğidir.
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Filtreleme Yap - jQuery</title>
</head>
<body>
<!-- Filtreleme Alanı -->
<input type="text" id="filtre" placeholder="Filtrelemek için bir yazın"><br>
<!-- Liste Alanı -->
<br><div class="sayac">Toplam <strong>4</strong> kişi gösteriliyor.</div>
<div class="container">
<div class="liste-ogesi">Ali <i>(senior)</i></div>
<div class="liste-ogesi">Ahmet <i>(junior)</i></div>
<div class="liste-ogesi">Veli <i>(danisman)</i></div>
<div class="liste-ogesi">Derya <i>(senior)</i></div>
</div>
<hr>
<textarea class="icerik-listesi" rows="4"></textarea><br>
<input type="button" name="gonder" value="Liste Öğesi Ekle" onclick="ekle('icerik-listesi')">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
$('#filtre').keyup(function () {
if ($('#filtre').val().length < 2) {
var tg = $('.liste-ogesi');
tg.show();
$(".sayac").html("Toplam <strong>" + tg.length + "</strong> kişi gösteriliyor.");
return;
}
$('.liste-ogesi').hide();
var txt = $('#filtre').val();
$('.liste-ogesi').each(function () {
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
}
});
var t = $('.liste-ogesi:visible');
$(".sayac").html("Toplam <strong>" + t.length + "</strong> kişi gösteriliyor.");
});
function ekle(liste) {
var deger = document.getElementsByClassName(liste);
var dizi = deger[0].value.split('\n');
for (var i = 0; i < dizi.length; i++) {
var parag = document.createElement("div");
parag.setAttribute("class", "liste-ogesi");
var metin = document.createTextNode(dizi[i]);
parag.appendChild(metin);
document.getElementsByClassName("container")[0].appendChild(parag);
}
}
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir