🔎 JavaScript ile Mini Search Bar Yapımı

includes + filter + input event ile Gerçek Zamanlı Arama Sanatı

Bir kullanıcı düşün…
Input’a J yazıyor.
Liste anında değişiyor.
Ja yazıyor… Liste daha da daralıyor.
Java yazıyor… “JavaScript” kalıyor.

Ve sen arkada şunu fısıldıyorsun:

“Ben bunu sadece 15 satır JavaScript ile yaptım.” 😏

İşte bu yazı, o sihrin perde arkasını anlatıyor.

🧠 1. Search Bar Mantığı (Önce Büyük Resim)

Kod yazmadan önce şunu netleştirelim:

Bir search bar aslında ne yapar?

1. Kullanıcı yazı yazar ✍️
2. JavaScript bu yazıyı yakalar 🎯
3. Bir listedeki elemanlarla karşılaştırır 🔍
4. Uyanları gösterir, uymayanları gizler 🚪

Yani olay şu üçlüde döner:

• input event → “Kullanıcı ne yazdı?”
• includes() → “Bu kelime burada var mı?”
• filter / koşul → “Göster mi gizle mi?”

Google bunun milyar dolarlık versiyonunu yapıyor.
Biz mini, tatlı, öğretici olanını 😄

🧱 2. HTML – Temel Yapı (İskelet Olmadan Kas Olmaz)

<input 
  type="text" 
  id="searchInput" 
  placeholder="Programlama dili ara..." 
/>

<ul id="languageList">
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
  <li>TypeScript</li>
  <li>React</li>
  <li>Vue</li>
  <li>Angular</li>
</ul>

🔍 Burada Ne Var?

• input
  → Kullanıcının yazı yazdığı yer
• ul + li
  → Filtrelenecek liste

📌 Bilerek basit tuttuk.
Çünkü olay HTML değil, JavaScript mantığı.

🎯 3. JavaScript’e Giriş – DOM ile Tanışma

const searchInput = document.getElementById("searchInput");
const listItems = document.querySelectorAll("#languageList li");

🧠 Ne Yaptık?

• Input’u yakaladık
• Listedeki tüm li’ları seçtik

Artık JavaScript bu elemanları kontrol edebilir, saklayabilir, gösterebilir.

🎈 Küçük ama kritik bilgi:
querySelectorAll sana NodeList döndürür.
Bu, dizi gibi davranır ama birebir array değildir.

⚡ 4. input Event – Gerçek Zamanlı Büyü ✨

searchInput.addEventListener("input", function () {
  console.log("Kullanıcı yazıyor...");
});

🎉 input Event Neden Efsane?

• Her harfte çalışır
• Enter’a basmaya gerek yok
• UX = 🧠 + ❤️

📌 Alternatifler:

• keyup → eski ama hâlâ kullanılır
• change → input’tan çıkınca çalışır (biz istemiyoruz)

Search bar = input event
Tartışmaya kapalı 😄

🔤 5. Kullanıcı Ne Yazdı? (value Gerçeği)

const searchText = searchInput.value;

Ama burada büyük bir tuzak var 🧨

"JavaScript".includes("javascript"); // false

😱 Çünkü JavaScript case-sensitive.

🛡️ 6. Case Sensitivity’den Kurtulma (Altın Kural)

const searchText = searchInput.value.toLowerCase();

Ve listedeki metinler için:

const text = item.textContent.toLowerCase();

📌 Altın Kural:

Kullanıcıdan gelen her metni normalize et
(lowercase, trim vs.)

❤️ 7. includes() – Search Bar’ın Kalbi

text.includes(searchText);

Ne Yapar?

• İçeriyorsa → true
• İçermiyorsa → false

Basit.
Hızlı.
Okunabilir.

includes() = “Var mı yok mu?”
Dedektifin büyüteci 🔍

🎭 8. Asıl Kod – Göster / Gizle Mantığı

searchInput.addEventListener("input", function () {
  const searchText = searchInput.value.toLowerCase();

  listItems.forEach(item => {
    const text = item.textContent.toLowerCase();

    if (text.includes(searchText)) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  });
});

🧩 Kodun Parça Parça Açıklaması

🔹 forEach

Her li’yı tek tek dolaşıyoruz.

“Sen, sen, sen… Bir de sen.” 😄

🔹 if (includes)

Eşleşme varsa:

display: block

Yoksa:

display: none

DOM manipülasyonunun en sade hali.

🧪 9. Daha Modern Yaklaşım – filter ile

searchInput.addEventListener("input", () => {
  const value = searchInput.value.toLowerCase();

  Array.from(listItems).filter(item => {
    item.style.display = item.textContent
      .toLowerCase()
      .includes(value)
      ? "block"
      : "none";
  });
});

📌 Burada ne öğrendik?

• Array.from() → NodeList’i array’e çevirdik
• Ternary operator → daha temiz kod

Bu kodu gören biri der ki:
“Bu arkadaş JS’e hakim.” 😎

🚀 10. Gerçek Hayat Senaryoları

Bu mini search bar nerelerde kullanılır?

• 🛒 E-ticaret ürün arama
• 👥 Kullanıcı listesi
• 📂 Dosya filtreleme
• 💬 Chat mesaj arama
• 🎮 Oyun komutları

Küçük bir örnek, büyük dünyaların kapısını açar.

💎 11. Profesyonel İpuçları

🔹 Boş input’ta her şeyi göster

if (searchText === "") {
  item.style.display = "block";
}

🔹 “Sonuç bulunamadı” mesajı ekle

UX puanı +10 ⭐

🔹 Büyük listelerde

• debounce kullan
• Gereksiz DOM güncelleme yapma

🧠 Kapanış – Bu Yazıdan Ne Kazandın?

✔ input event
✔ includes()
✔ filter mantığı
✔ DOM kontrolü
✔ Gerçek bir UI parçası

Artık sen sadece kod yazan biri değil,
kullanıcıyı düşünen bir frontend geliştiricisin. 🦸‍♂️