Live Search — Pengantar & Setup JavaScript OOP

Konsep Live Search

Traditional Search: User ketik → submit form → halaman refresh → lihat hasil.

Live Search: User ketik → real-time (tanpa refresh) → hasil muncul langsung di overlay.

Live search memberikan UX yang lebih interaktif dan cepat.

---

Arsitektur JavaScript: Object-Oriented Pattern

Buat file baru: src/modules/Search.js

import $ from 'jquery';

class Search {
  // 1. Constructor — describe & create/initiate our object
  constructor() {
    alert("Hello, I am a search.");
  }

  // 2. Events — connect events to methods

  // 3. Methods — actions (verbs)
}

export default Search;

3 Area Utama dalam Class

Area	Fungsi	Analogi (Object "Manusia")
Constructor	Mendefinisikan properti, menginisialisasi object	Nama, warna mata, kepala, otak
Events	Menghubungkan event ke method (dispatcher)	"Jika kepala dingin → pakai topi"
Methods	Aksi/fungsi yang bisa dilakukan	Lari, jalan, bicara

Import di src/index.js

import Search from './modules/Search';

const search = new Search();

💡 Class = blueprint reusable. Kode di dalamnya baru dieksekusi saat membuat instance (new Search()).

📝 Catatan jQuery: Course ini menggunakan jQuery untuk bagian JavaScript. Di akhir setiap fitur JS, ada video tambahan dengan versi tanpa jQuery (plain JS).