input'a filtreleme metni girildikten sonra Enter tuşuna basıldığı zaman li elementlerini verilen koşula göre filtreleyen javascript kodu örneğidir.
index.html
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Enter Tuşuna Basıldığında Filtreleme Yap - Javascript</title>
</head>
<body>
<input id="ara" type="text" onkeypress="filtrelemeYap()">
<ul id="liste">
<li><a href="#">Elma</a></li>
<li><a href="#">Kivi</a></li>
<li><a href="#">Karpuz</a></li>
<li><a href="#">Avokado</a></li>
<li><a href="#">Muz</a></li>
<li><a href="#">Ananas</a></li>
<li><a href="#">Kiraz</a></li>
<li><a href="#">Vişne</a></li>
<li><a href="#">Nar</a></li>
<li><a href="#">Portakal</a></li>
<li><a href="#">Mandalina</a></li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
function filtrelemeYap() {
//--------------------------------------------------
//Değişken tanımla.
//--------------------------------------------------
var input;
var filtreMetni;
var liste;
var listeDizi;
var aranan;
var i;
var a;
//--------------------------------------------------
//Değişkenlere değer ata.
//--------------------------------------------------
input = document.getElementById("ara");
filtreMetni = input.value.toLocaleLowerCase('tr-TR');
liste = document.getElementById("liste");
listeDizi = liste.getElementsByTagName("li");
if (event.key === "Enter") {
//--------------------------------------------------
//li elementleri için döngü çalıştır.
//--------------------------------------------------
for (i = 0; i < listeDizi.length; i++) {
//--------------------------------------------------
//li elementi içindeki ilk a elementi için işlem yap.
//--------------------------------------------------
a = listeDizi[i].getElementsByTagName("a")[0];
//--------------------------------------------------
//Eğer a elementi varsa işlem yap.
//--------------------------------------------------
if (a) {
aranan = a.textContent || a.innerText;
if (aranan.toLocaleLowerCase('tr-TR').indexOf(filtreMetni) > -1) {
listeDizi[i].style.display = "";
} else {
listeDizi[i].style.display = "none";
}
}
}
//--------------------------------------------------
//input'u yeni arama için hazırla.
//--------------------------------------------------
input.select();
}
}
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir