Günümüz web uygulamalarının çoğu, kullanıcıların içerik aramasını desteklemek için dinamik ve etkileşimli öğeler kullanır. Bu öğelerin başında, kullanıcıların belirli bir kriteri karşılayan HTML elemanlarını arayıp bulmasına olanak tanıyan JavaScript aramaları gelir. Bu makalede, HTML ve JavaScript kullanarak bir web sayfasında div öğelerini aramayı ve kullanıcıya daha iyi bir deneyim sunmayı ele alacağız.
JavaScript ile Div Arama Nasıl Yapılır?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Arama</title>
</head>
<body>
<input type="text" id="aramaInput" oninput="divAra()" placeholder="Div ara">
<div id="container">
<div class="item">Örnek 1</div>
<div class="item">Örnek 2</div>
<div class="item">Örnek 3</div>
<div class="item">Örnek 4</div>
</div>
<p id="hataMesaji" style="color: red; display: none;">Aranan sonuç bulunamadı.</p>
<script>
// Belirli bir kriteri karşılayan div öğelerini ara
function divAra() {
var arananMetin = document.getElementById('aramaInput').value.toLowerCase(); // Aranan metni al ve küçük harfe dönüştür
var divlar = document.querySelectorAll('.item'); // Tüm .item sınıfına sahip divleri seç
var sonucBulundu = false; // Arama sonucu bulunduğunu belirten bayrak
divlar.forEach(function(div) {
var divIcerik = div.textContent.toLowerCase(); // Div içeriğini al ve küçük harfe dönüştür
if (divIcerik.includes(arananMetin)) { // Eğer div içeriği aranan metni içeriyorsa
div.style.display = "block"; // Div'i görünür yap
sonucBulundu = true; // Sonucun bulunduğunu işaretle
} else {
div.style.display = "none"; // Aranan metni içermiyorsa, div'i gizle
}
});
// Aranan sonuç bulunamazsa hata mesajını göster
if (!sonucBulundu) {
document.getElementById('hataMesaji').style.display = "block";
} else {
document.getElementById('hataMesaji').style.display = "none";
}
}
</script>
</body>
</html>
HTML ve JavaScript kullanarak bir web sayfasında div öğelerini aramak, kullanıcıların istedikleri içeriği daha kolay bulmalarını sağlar ve genel kullanıcı deneyimini iyileştirir. Bu makalede anlatılan adımları izleyerek, web uygulamalarınıza arama işlevselliği ekleyebilir ve kullanıcı memnuniyetini artırabilirsiniz.
Yorumlar (0)