M.AIM.AISoloLabsUI Sözlüğü · Girdi

← UI Sözlüğü

Arama çubuğu search bar

bilinen diğer adları search bar · arama kutusu · aranabilir seçim (combobox)

Böyle diyorsan: "büyüteçli kutu" · "arama yeri" → bunun adı arama çubuğu.

Büyüteç ikonlu arama girişi; çoğu zaman yazarken öneri gösterir.

Arama çubuğu bir metin kutusudur ama sözleşmesi farklıdır: kullanıcı buraya bir SORU yazar ve karşılığında sonuç bekler. Bu beklenti iki teknik sonuç doğurur. Birincisi zamanlama — yazdıkça öneri gösteren bir arama, her tuşta sunucuya gitmez; kısa bir bekleme koyar ve önceki isteği iptal eder, yoksa geç dönen eski bir cevap yeni cevabın üstüne biner ve kullanıcı yanlış sonuç görür. İkincisi klavye — öneriler listesinde ok tuşlarıyla gezilebilmeli ve seçilen öneri okunabilmelidir; bu, aranabilir seçim (combobox) kalıbının işidir ve doğru yapılması ciddi iştir.

Kapsam: Bu madde serbest metinle arama yapan alanı kapsar. Bilinen bir listeden değer seçtiren aranabilir kutu, işlev olarak Seçim Kutusu ailesine daha yakındır; ikisi aynı görünse de biri sonuç getirir, diğeri değer belirler.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
🔍Ara...
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Navbar'a arama ekle: type=search kutu; 2+ karakterde 300ms debounce ile ilk 5 öneri (eşleşen kısım kalın), ok tuşlarıyla gezilir, Enter seçili öneriye — öneri seçili değilse tam arama sayfasına; dışa tıklama/ESC paneli kapatsın; sonuç yoksa 'bulunamadı' hâli gösterilsin; öneriler metin olarak basılsın (HTML enjeksiyonuna kapalı).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Aramam huysuz; klasikleri sırayla ele: (1) her tuşta istek — debounce yok, sunucu inim inim; (2) öneri paneli dışa tıklamayla kapanmıyor, sayfada asılı kalıyor; (3) Enter'ın davranışı belirsiz — bazen ilk öneriye bazen tam aramaya gidiyor; (4) öneriler innerHTML ile basılıyor (XSS kapısı); (5) hızlı yazımda eski isteğin cevabı yeniyi eziyor (yarış — istek iptali yok); (6) klavyeyle önerilerde gezilemiyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Girdi + ikontype=search

    Büyüteçli kutu; type=search mobilde 'ara' tuşunu getirir, temizleme ✕'i kazandırır.

  • 2Öneri panelirole=listbox

    Yazdıkça beliren ilk 5 sonuç; her istek DEBOUNCE'lanır (300ms) — her tuşta sunucuya koşulmaz.

  • 3Eşleşme vurgusu<b>kah</b>ve

    Önerinin içinde aranan parçanın kalın gösterimi — kullanıcı neden önerildiğini görür.

  • 4Boş sonuç'bulunamadı' + öneri

    Hiç sonuç yoksa panel sessizce kaybolmaz; 'X için sonuç yok' + yakın öneri gösterir.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • ABoştype="search"

    Yer tutucu ne aranabileceğine dair gerçek bir örnek versin ('ürün, marka ya da kategori'). type=search mobilde 'Ara' tuşunu getirir ve temizleme ✕'ini kazandırır.

  • BYazılıyordebounce

    Öneriler geliyor. Her tuşta istek atma; kısa bir bekleme koy ve eskisini iptal et — yoksa geç dönen eski cevap yenisinin üstüne biner.

  • CÖneriler açıkcombobox + aria-activedescendant

    Liste görünür. Ok tuşlarıyla gezilir, Enter seçer, Escape kapatır; odak girdide KALIR, listeye atlamaz.

  • DSonuç yokboş durum

    En çok ihmal edilen hâl. 'Sonuç bulunamadı' yetmez: yazım önerisi, filtre temizleme ya da yakın sonuç sun.

  • EYükleniyoraria-busy

    İstek uçuşta. Göstergesiz bekleme kullanıcıya arayüzün donduğunu düşündürür; ama her tuşta spinner çakmak da rahatsız eder.

KODDAKİ ADLARI
HTMLinput type=searchnative ara/temizle
ARIAcombobox + aria-activedescendantklavye gezinme
JSdebounce + AbortControllerperformans + yarış önleme
ARIArole="search" (yer imi)sayfadaki arama bölgesini işaretler
ERİŞİLEBİLİRLİK & SIK HATA
  • Arama alanını role="search" yer imiyle işaretle: ekran okuyucu kullanıcısı sayfadaki aramaya doğrudan atlayabilir.
  • Etiket görsel olarak gizlense bile var olmalı. Yalnız büyüteç ikonu bir ad değildir; görsel olarak gizli bir <label> ya da aria-label kullan.
  • Öneri listesinde odak girdide kalmalı ve seçili öneri aria-activedescendant ile bildirilmeli; odağı listeye taşırsan kullanıcı yazmaya devam edemez.
  • Sonuç sayısını duyur (role="status"): 'Sonuç bulunamadı' ya da '12 sonuç' bilgisi yalnız gözle görülüyorsa ekran okuyucu kullanıcısı hiçbir şey olmadığını sanar.
  • Yazarken sonuçların kendiliğinden değişmesi bağlam değişikliği sayılabilir (WCAG 3.2.2); değişimi sayfayı yeniden yükleyerek değil, aynı yerde ve duyurarak yap.
SIK KARIŞTIRILANLAR

Seçim kutusundan farkı. Arama SONUÇ getirir, seçim kutusu DEĞER belirler. Aramada ne yazacağını sen bilirsin ve karşılığında bir liste gelir; seçim kutusunda seçenekler zaten bellidir ve sen birini işaretlersin. Aranabilir seçim ikisinin arasında durur: göründüğü gibi arama gibi çalışır ama sonucu bir değerdir ve formla gider — hangisini yaptığını bilmek, Enter'a basınca ne olacağını belirler.

Seçim kutusu sayfasına git →

Metin kutusundan farkı. Arama çubuğu bir metin kutusudur ama sözleşmesi farklıdır: metin kutusunda yazdığın şey KAYDEDİLİR, arama çubuğunda yazdığın şey SORULUR. Bu yüzden aramada Enter sonuç getirir, temizleme ✕'i beklenir ve içerik saklanmaz. Aynı görünüşü paylaşmaları ikisini aynı yapmaz.

Metin kutusu sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Seçim kutusu selectMetin kutusu inputBoş durum empty stateİskelet yükleme skeleton

AYNI AİLEDE · GIRDI