JavaScript’te Dize Listesini Kullanarak Basit Bir Arama Çubuğu Nasıl Yapılır?

HTML sayfanızda bir girdi kutusu ve bir düğme oluşturun:
html
Copy code
<input type="text" id="search-input" placeholder="Arama yap...">
<button id="search-button">Ara</button>
JavaScript kodunuzda, arama düğmesinin tıklanmasını dinleyen bir olay dinleyicisi oluşturun:
javascript
Copy code
document.getElementById("search-button").addEventListener("click", function() {
  // Arama yapılacak kod buraya gelecek
});
Dize listesi oluşturun. Bu örnek için, bir dizi hayvan adı kullanacağız:
javascript
Copy code
var animals = ["kedi", "köpek", "kuş", "balık", "tavşan", "kertenkele", "kedi balığı", "kaplumbağa"];
Arama kutusundaki metni alın ve küçük harflere dönüştürün:
javascript
Copy code
var searchText = document.getElementById("search-input").value.toLowerCase();
Dize listesindeki her öğe için bir döngü oluşturun ve arama metnini içeren her öğeyi bulun:
javascript
Copy code
var searchResults = [];
for (var i = 0; i < animals.length; i++) {
  if (animals[i].toLowerCase().indexOf(searchText) !== -1) {
    searchResults.push(animals[i]);
  }
}

Bulunan sonuçları sayfada gösterin:

javascript
Copy code
var resultsElement = document.getElementById("search-results");
resultsElement.innerHTML = "";
if (searchResults.length === 0) {
  resultsElement.innerHTML = "Sonuç bulunamadı.";
} else {
  for (var i = 0; i < searchResults.length; i++) {
    resultsElement.innerHTML += "<li>" + searchResults[i] + "</li>";
  }
}

Tam olarak birleştirildiğinde, tüm JavaScript kodu şu şekilde görünebilir:

javascript
Copy code
var animals = ["kedi", "köpek", "kuş", "balık", "tavşan", "kertenkele", "kedi balığı", "kaplumbağa"];

document.getElementById("search-button").addEventListener("click", function() {
  var searchText = document.getElementById("search-input").value.toLowerCase();

  var searchResults = [];
  for (var i = 0; i < animals.length; i++) {
    if (animals[i].toLowerCase().indexOf(searchText) !== -1) {
      searchResults.push(animals[i]);
    }
  }

  var resultsElement = document.getElementById("search-results");
  resultsElement.innerHTML = "";
  if (searchResults.length === 0) {
    resultsElement.innerHTML = "Sonuç bulunamadı.";
  } else {
    for (var i = 0; i < searchResults.length; i++) {
      resultsElement.innerHTML += "<li>" + searchResults[i] + "</li>";
    }
  }
});