Ikhtisar Chapter 12b: Live Search dengan JavaScript

Apa yang Dipelajari?

Cara membuat fitur live search (pencarian real-time tanpa refresh halaman) menggunakan JavaScript OOP — dari overlay UI, keyboard shortcuts, sampai debounce pattern.

---

Poin Utama

1. Konsep Live Search

Tipe	Cara Kerja
Traditional Search	Ketik → submit form → halaman refresh → lihat hasil
Live Search	Ketik → hasil langsung muncul di overlay (tanpa refresh)

---

2. Arsitektur JavaScript OOP

File src/modules/Search.js menggunakan pola class dengan 3 area:

Area	Isi
Constructor	Simpan referensi elemen DOM + properti state
Events	Hubungkan event (click, keydown, keyup) ke method
Methods	Aksi: buka/tutup overlay, proses pencarian

.bind(this) dipakai agar this tetap merujuk ke object Search (bukan HTML element).

---

3. Overlay Full-Screen

HTML overlay ditambahkan di footer.php — berisi search input dan area hasil. Dikontrol pakai class CSS:

• search-overlay--active → tampilkan overlay
• body-no-scroll → kunci scroll halaman

---

4. Keyboard Shortcuts

Tombol	Aksi
S	Buka overlay (hanya jika belum terbuka dan tidak sedang typing di input lain)
Escape	Tutup overlay

Properti isOverlayOpen mencegah event dipanggil berulang saat tombol ditahan.

---

5. Debounce Pattern — Inti Live Search

Jangan kirim request setiap keystroke! Tunggu user berhenti mengetik (~750ms):

Ketik "bio" → setiap huruf reset timer → 
setelah 750ms tanpa ketikan → baru kirim request

Mekanisme:

1. Setiap keystroke → clearTimeout timer lama → mulai timer baru
2. Jika user ketik lagi sebelum 750ms → timer di-reset
3. Ketika timer habis → getResults() dijalankan
4. Spinner loading ditampilkan selama menunggu

State management:

Property	Fungsi
typingTimer	Reference ke setTimeout, bisa di-clear
isSpinnerVisible	Cegah spinner di-reset tiap keystroke
previousValue	Abaikan keypress yang tidak ubah nilai (arrow keys, shift, dll)

---

Satu Kalimat

Chapter ini membangun fondasi live search — overlay UI, keyboard shortcuts, dan debounce pattern — yang akan dihubungkan ke WordPress REST API di chapter berikutnya untuk menampilkan hasil pencarian real-time.