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ı

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<input id="myInput" class="form-control" type="text" placeholder="Ara..">
</div>
<div class="row">
<ul id="myList" class="list-group">
<li class="list-group-item list-group-item-info">Cras justo odio</li>
<li class="list-group-item list-group-item-info">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Morbi leo risus</li>
<li class="list-group-item list-group-item-info">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-info">Vestibulum at eros</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<li class="list-group-item list-group-item-info">Cras justo odio</li>

<li class="list-group-item list-group-item-info">Dapibus ac facilisis in</li>

<li class="list-group-item list-group-item-info">Morbi leo risus</li>

<li class="list-group-item list-group-item-info">Porta ac consectetur ac</li>

<li class="list-group-item list-group-item-info">Vestibulum at eros</li>

</ul>

</div>

integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

crossorigin="anonymous">

</script>

</body>

</html>

Css Kodları

#myInput {
max-width: 205px;
}
.row {
margin-bottom: 10px;
margin-top: 10px;
}
.list-group-item {
padding: 0.50rem 1.25rem;
}

#myInput {

max-width: 205px;

}

.row {

margin-bottom: 10px;

margin-top: 10px;

}

.list-group-item {

padding: 0.50rem 1.25rem;

}

Jquery Kodları

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

$(document).ready(function () {

$("#myInput").on("keyup", function () {

var value = $(this).val().toLowerCase();

$("#myList li").filter(function () {

$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

});

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.

JQuery ile Listede Arama Yapmak

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın