JavaScript ile İçerik Filtreleme ve Arama Nasıl Yapılır?

Adı : JavaScript ile İçerik Filtreleme ve Arama Nasıl Yapılır?

İnternet kullanıcılarının web sitelerinde aradıkları içeriği bulmaları kolaylaştırmak için, birçok İnternet sitesi içerik filtreleme ve arama özellikleri sunmaktadır. Bu özellikler, kullanıcıların aradıkları içeriği hızlı ve kolay bir şekilde bulmalarını sağlar.
JavaScript programlama dili, web sitesi geliştiricilerinin içerik filtreleme ve arama özelliklerini web sitelerine kolayca eklemelerine olanak tanır. Bu konuda birkaç örnek sunarak, JavaScript ile içerik filtreleme ve arama nasıl yapılır konusunu açıklamaya çalışacağız.
İçerik Filtreleme
İçerik filtreleme özelliği, kullanıcıların bir web sitesindeki içerikleri belirli bir kriter veya özelliklere göre filtreliyor. Bu sayede, kullanıcılar istedikleri özellikleri içeren içerikleri daha hızlı bulabilirler.
Örneğin, bir giyim sitesi kullanıcılara “renk” , “beden”, “marka” seçeneklerini olduğu gibi sunabilir. Kullanıcılar bu seçeneklere göre filtreleyerek kıyafetleri arama kolaylığı sağlayabilirler. Doğru seçimleri yaptıklarında, kıyafetlerin yanında belirlenen renk ve bedene göre güncel bir filtreleme yapılabilir.
Bir örnek kod aşağıdaki gibidir:
```javascript
var filterFunction = function () {
var inputText = document.getElementById('myInput').value.toLowerCase();
var ulList = document.getElementById('myUL');
var liList = ulList.getElementsByTagName('li');
for (var i = 0; i < liList.length; i++) {
var a = liList[i].getElementsByTagName('a')[0];
if (a.innerHTML.toLowerCase().indexOf(inputText) > -1) {
liList[i].style.display = '';
} else {
liList[i].style.display = 'none';
}
}
}
```
Bu kod parçası arama kutusundaki text içeriği filtreler.
Arama
Arama özelliği, kullanıcıların web sitesindeki tüm içerikleri hızlı ve kolay bir şekilde aramasını sağlar. Kullanıcılar anahtar kelimeyi girerek gelecektekilerde oyuncuların, kadın basketbolcuların, futbolcuların, ürün ve hatta Satılık satın alabilecekleri bir e-ticaret sitesinde aradıkları her şeyi arayabilirler.
Bir örnek kod, kullanicinin anahtar kelime girerek aramasını ajans etmektedir:
```javascript
function search() {
var input, filter, ul, li, h3, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById(myUL);
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
h3 = li[i].getElementsByTagName(h3)[0];
txtValue = h3.textContent || h3.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = ;
} else {
li[i].style.display = none;
}
}
}
```
Bu kod, kullanıcının arama kutusundaki metni yukarı dönüştürerek, web sitesindeki içerikleri arar ve anahtar kelimeye uymayan sonuçları gizler.
Özetle, JavaScript ile içerik filtreleme ve arama özellikleri, web siteleri için son derece önemlidir. Bu özellikler, kullanıcıların istedikleri içeriği kolayca bulabilmesine yardımcı olur. Bu yazıdaki örnekler, web sitesi geliştiricilerine, kolay ve basit yöntemlerle bu özellikleri eklemelerine yardımcı olabilir.