htmlcssjavascriptpencariandataMenengah10 mnt baca

Pencarian Real-Time

Kotak pencarian yang memfilter hasil saat pengguna mengetik, seperti search di marketplace.

Kenapa Real-Time?

Pengguna modern tidak menekan Enter untuk mencari; hasil muncul saat mereka mengetik. Ini pola yang dipakai Google, Tokopedia, dan hampir semua aplikasi. Implementasinya sederhana, tapi ada satu teknik penting: debounce.

Langkah Membangun

HTML: Input pencarian dengan ikon 🔍, penghitung "X hasil", dan wadah daftar (pakai data produk dari modul filter).

CSS: Input besar dengan border menonjol saat fokus. Hasil dalam kartu. Sorot (highlight) kata kunci yang cocok dengan <mark>.

JS:

  1. Event input: ambil kata kunci, lowercase, filter produk yang namanya mengandung kata kunci.
  2. Highlight: ganti kemunculan kata kunci dengan <mark>kata</mark> memakai regex.
  3. Tampilkan pesan "Tidak ada hasil untuk 'xyz'" jika kosong, plus tombol "Reset".

Debounce: Tanpa debounce, tiap ketikan memicu filter + render. Untuk data kecil tidak masalah, tapi untuk ratusan item atau request API, ini boros. Debounce = "tunggu pengguna berhenti mengetik 300ms baru jalankan". Implementasinya:

js
let jeda;
input.addEventListener("input", () => {
  clearTimeout(jeda);
  jeda = setTimeout(() => cari(input.value), 300);
});

Kesalahan Umum

  • Pencarian case-sensitive sehingga "laptop" tidak menemukan "Laptop" (lowercase keduanya).
  • Tidak menangani karakter regex khusus di kata kunci saat highlight (escape atau pakai split/join).
  • Melupakan state kosong: tampilkan semua saat input dikosongkan.
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Riwayat Pencarian

Simpan 5 pencarian terakhir di localStorage dan tampilkan sebagai chip yang bisa diklik di bawah input. Klik chip menjalankan pencarian itu lagi.