İçeriğe geç

Arama önerileri listesi

Web / frontend · Zorluk 3/5 · TypeScript · 45 satırKöken: Gerçek proje (anonim)

Görev

Yapay zekâdan istenen

Arama kutusunun altındaki öneri listesinin durumunu yöneten createAutocomplete(options) yaz. Yazdıkça options içinden yazılanla başlayanları göster (büyük/küçük harf duyarsız, baştaki ve sondaki boşluk yok sayılır, en çok 5). Öneriye fareyle tıklanınca öneri kutuya yazılsın ve liste kapansın. Kutudan çıkınca (blur) liste kapansın. Sayfa kutunun input ve blur olaylarını, her önerinin pointerdown ve click olaylarını bu fonksiyonlara iletir. Liste yalnız suggestions() doluyken çizilir. Klavyeyle gezinme ayrı bir görev.

Teslim notu

Yapay zekâ kodu teslim ederken şunu yazdı:

“Öneriler yazdıkça süzülüyor, tıklanan öneri kutuya yazılıp liste kapanıyor, kutudan çıkınca da liste kapanıyor.”

Yapay zekânın yazdığı kod

TypeScript45 satır

Hatalı bulduğun satırları işaretle; her işarete önem seç ve nedenini bir cümleyle yaz.

Satıra tıkla ya da dokun. Klavyede satıra gidip Enter'a bas.

0/5 işaret
Önem nasıl seçilir
  • KritikVeri kaybı, güvenlik açığı ya da para kaybı
  • ÖnemliGörevin istediği bir durumda kullanıcı yanlış sonuç alır
  • KüçükGörevin dışında kalan nadir bir uç durum ya da okunurluk

Test konusunda önem, testin yakalamadığı hatalı uygulamanın etkisine göre belirlenir.

Gerekçe puanlanmaz; sonuçta örnek cevapla karşılaştırırsın.

export function createAutocomplete(options: string[]) {
  let value = "";
  let open = false;
  let pressed = -1;
5
  function matches(): string[] {
    const typed = value.trim().toLowerCase();
    if (typed === "") {
      return [];
    }
    return options
      .filter((option) => option.toLowerCase().startsWith(typed))
      .slice(0, 5);
  }
15
  function choose(index: number): void {
    const option = matches()[index];
    if (option !== undefined) {
      value = option;
      open = false;
      pressed = -1;
    }
  }
24
  return {
    value: () => value,
    suggestions: () => (open ? matches() : []),
    pressedIndex: () => pressed,
    input(text: string): void {
      value = text;
      pressed = -1;
      open = matches().length > 0;
    },
    blur(): void {
      open = false;
      pressed = -1;
    },
    optionPointerDown(index: number): void {
      pressed = index;
    },
    optionClick(index: number): void {
      choose(index);
    },
  };
}

Kanıtlayan test

Doğru seçenek, bu kodda başarısız olan, yani hatayı ortaya çıkaran testtir.

Test seçenekleri
Göndermek için en az bir satır işaretle.

Gönderince sayaca yedi bilgi gider; gerekçe metnin cihazında kalır. Veriler