Altın Konu JavaScript İle Filtre Listesi Nasıl Oluşturulur?

GUNNERIUS · 2 Mar 2024

JavaScript, web geliştirme dünyasında oldukça yaygın olarak kullanılan bir programlama dilidir. Bu dilin esnekliği ve tarayıcı üzerinde çalışabilmesi, web sayfalarını etkileşimli hale getirmek için ideal bir seçim yapar. Filtre listeleri de bu etkileşimli özelliklerden biridir ve JavaScript kullanarak oluşturulabilir. Bu makalede, JavaScript kullanarak filtre listelerinin nasıl oluşturulacağına dair adımları detaylı bir şekilde inceleyeceğiz.

1. Temel HTML Yapısını Oluşturma

İlk adım olarak, filtre listesini içerecek temel HTML yapısını oluşturmalıyız. Bu yapı, filtrelenecek öğeleri ve filtre seçeneklerini içermelidir. Örneğin:

[CODE lang="html" title="HTML"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Filtre Listesi</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Ara...">
<ul id="filteredList"></ul>

<script src="script.js"></script>
</body>
</html>[/CODE]

Yukarıdaki HTML kodu, bir metin giriş kutusu ve filtrelenmiş öğelerin listeleneceği bir <ul> elementi içerir.

2. Veri Setini Hazırlama

Filtre listesini oluşturmadan önce, filtrelenecek veri setini hazırlamamız gerekmektedir. Bu örnek için, basit bir dizi kullanabiliriz:

[CODE lang="javascript" title="jsx"]const data = [
"Elma",
"Armut",
"Muz",
"Portakal",
"Çilek",
"Üzüm",
"Kiraz",
"Kivi",
"Ananas"
];[/CODE]

3. JavaScript İle Filtreleme Fonksiyonunu Oluşturma

Şimdi, kullanıcıdan gelen girişi alacak ve veri setini filtreleyecek bir JavaScript fonksiyonu oluşturmalıyız:

[CODE lang="javascript" title="jsx"]function filterList(input, dataList) {
const filteredList = dataList.filter(item => {
return item.toLowerCase().includes(input.toLowerCase());
});

return filteredList;
}[/CODE]

Yukarıdaki fonksiyon, giriş metnini veri setindeki her bir öğeyle karşılaştırır ve eşleşen öğeleri bir dizi olarak döndürür.

4. Kullanıcı Girişini Dinleme ve Sonuçları Güncelleme

Son olarak, kullanıcının girişini dinlemeli ve filtrelenmiş sonuçları HTML içeriğine eklemeliyiz:

[CODE lang="javascript" title="jsx"]const inputBox = document.getElementById('searchInput');
const filteredList = document.getElementById('filteredList');

inputBox.addEventListener('input', function() {
const inputValue = this.value;
const filteredData = filterList(inputValue, data);

displayFilteredList(filteredData);
});

function displayFilteredList(filteredData) {
filteredList.innerHTML = '';

filteredData.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
filteredList.appendChild(li);
});
}[/CODE]

Bu JavaScript kodu, kullanıcının metin giriş kutusuna herhangi bir giriş yaptığında input olayını dinler. Ardından, filterList() fonksiyonunu kullanarak veri setini filtreler ve sonuçları displayFilteredList() fonksiyonu aracılığıyla HTML içeriğine ekler.

Bu adımları takip ederek, JavaScript kullanarak bir filtre listesi oluşturabilirsiniz. Bu filtre listesi, kullanıcıların belirli bir metni arayarak veri setini dinamik olarak filtrelemesine olanak tanır. JavaScript'in gücünü kullanarak, web sayfalarını daha etkileşimli hale getirebilir ve kullanıcı deneyimini geliştirebilirsiniz.