Cara Membuat Fitur Autocomplete Search dengan Laravel dan AJAX

Pendahuluan

Bayangin lagi ngerjain fitur pencarian, tapi tiap user ngetik satu huruf, page-nya harus reload total dan bikin pengalaman user jadi terasa patah-patah. Saya sering banget nemuin masalah ini di project yang datanya mulai banyak, di mana user pengen hasil yang instan tanpa harus pindah halaman. Autocomplete dengan AJAX adalah penyelamat di sini, karena kita bakal narik data dari database secara asinkron tanpa mengganggu alur kerja user.

Tips & Best Practices

• Di banyak project, biasanya saya mulai dari pembatasan limit query; jangan pernah menarik semua data sekaligus, selalu gunakan take(10) supaya performa server tetap stabil meski table punya jutaan row.
• Saat ngerjain UI, saya selalu pasang debounce atau jeda 300ms setelah user ngetik sebelum request dikirim ke backend, biar server nggak pusing dapet request tiap milidetik.
• Untuk sisi database, saya selalu pastiin kolom yang dipakai buat search udah dikasih index biar pencarian LIKE nggak bikin database lemot gara-gara sequential scan.

Contoh Kode

Di controller, kita cukup ambil input dan balikin format JSON simpel:

public function search(Request $request) { $query = $request->get('q'); $data = User::where('name', 'LIKE', "%$query%")->limit(5)->get(); return response()->json($data); }

Di front-end, pakai Fetch API buat nembak route-nya:

input.addEventListener('keyup', async () => { const response = await fetch(`/search?q=${input.value}`); const data = await response.json(); // render ke dropdown });

Variasi Implementasi

Kita punya dua jalur utama: pakai library front-end seperti Select2 atau Typeahead kalau pengen yang 'plug-and-play' dan tampilannya cantik, atau bikin komponen custom pakai Alpine.js kalau lagi pengen project yang enteng tanpa ribet sama jQuery. Kalau datanya sangat masif, biasanya saya beralih ke Laravel Scout dengan Algolia atau Meilisearch supaya pencarian jauh lebih ngebut dibanding operator LIKE standar.

Kesalahan Umum

• Lupa nge-sanitize inputan user, yang berisiko bikin query kena injeksi string yang nggak diinginkan.
• Nggak nge-handle kondisi saat database lagi kosong atau lemot, bikin UI kayak nge-freeze tanpa ada loading indicator.
• Terlalu banyak ngirim payload JSON yang nggak perlu, cukup kirim data yang mau ditampilin aja, jangan kirim seluruh object model.
• Lupa nge-cancel request sebelumnya kalau user ngetik cepet, akhirnya hasil pencarian malah ketuker-tukar (race condition).
• Nggak pakai Eager Loading kalau data yang dicari punya relasi, ini sering bikin masalah N+1 query yang bikin aplikasi tiba-tiba lemot pas di-deploy.

Ringkasan

Implementasi autocomplete itu sebenarnya seni menyeimbangkan antara kenyamanan user dan beban server. Lewat Laravel dan AJAX, kita bisa bikin interface yang terasa sangat responsif. Kuncinya bukan cuma di kodenya saja, tapi di cara kita menghargai performa dan pengalaman si pengguna di balik layar.