htmlcssjavascriptpencarianformMenengah11 mnt baca

Autocomplete / Saran Pencarian

Membangun kotak pencarian dengan daftar saran yang bisa dipilih via keyboard.

Kenapa Autocomplete?

Google tidak menunggumu selesai mengetik; ia menebak. Autocomplete mempercepat pencarian dan mengurangi typo. Ini juga mengajarkan navigasi keyboard: panah atas/bawah + Enter, standar aksesibilitas.

Langkah Membangun

HTML: Input pencarian dalam wrapper relative, dan <ul id="saran"> absolute di bawahnya.

CSS: Daftar saran seperti dropdown: putih, shadow, item hover berwarna. Item yang dipilih keyboard (class sorot) punya background ungu muda.

JS:

  1. Data: array nama (misal 30 kota Indonesia).
  2. Event input (dengan debounce): filter data yang diawali/mengandung kata kunci, tampilkan maks 8 saran. Sorot kata cocok dengan <mark>.
  3. Keyboard: ArrowDown/ArrowUp menggerakkan indeksSorot, Enter memilih saran tersorot, Escape menutup.
  4. Klik saran mengisi input. Klik di luar menutup daftar.

indeksSorot = -1 artinya tidak ada yang tersorot. Pastikan scroll item tersorot ke area terlihat dengan scrollIntoView({ block: "nearest" }).

Kesalahan Umum

  • Daftar tidak tertutup saat input dikosongkan.
  • Enter men-submit form padahal saran sedang tersorot (preventDefault saat indeksSorot >= 0).
  • Saran dari data tidak di-escape sehingga nama dengan < merusak HTML (gunakan textContent untuk bagian teks).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Saran dari API

Ganti data statis dengan fetch ke API Datamuse (https://api.datamuse.com/sug?s=kata) yang mengembalikan saran kata bahasa Inggris. Tangani loading dan error.