Membuat Fitur Autocomplete Pencarian dengan PHP dan jQuery UI

Fitur autocomplete atau pencarian otomatis kini sudah menjadi bagian penting di berbagai website modern. Fungsinya sederhana namun sangat membantu pengguna: ketika kita mulai mengetik di kolom pencarian, website langsung menampilkan saran kata yang relevan — mirip seperti kolom pencarian di Google.

Pada artikel ini, kita akan membahas contoh implementasi fitur autocomplete menggunakan PHP dan jQuery UI. Studi kasusnya mencari data barang pada sebuah aplikasi penjualan.

1. Pertama kita siapkan dulu database dan tablenya. Beri nama databasenya : penjualan_db dan tablenya : barang. Silahkan download file SQL nya disini

2. Buat file koneksi.php untuk menghubungkan form dengan database



3. Kita buat form untuk entry data yang dicari. Beri nama file index.php



4. Buat file search.php untuk menampilkan data pada database dihalaman.



5. Langkah terakhir, untuk menampilkan halaman menjadi lebih menarik tambahkan CSS, beri nama file style.css



Penjelasan singkat

Pada file index.php atau halaman form, ada bagian JavaScript sebagai berikut :

$("#search").autocomplete({
    source: 'search.php',
    minLength: 1,

#search adalah ID dari input pencarian.
source: 'search.php' artinya data hasil pencarian akan diambil dari file PHP tersebut.
minLength: 1 berarti autocomplete baru aktif jika pengguna mengetik minimal 1 huruf.

Kode di atas berfungsi untuk mengaktifkan fitur pencarian otomatis pada elemen input dengan ID search. Setiap kali pengguna mengetik sesuatu, JavaScript akan memanggil file search.php  untuk mengambil daftar saran hasil pencarian dari server.

select: function(event, ui) {
    $("#search").val(ui.item.value);
    return false;
},

Ketika pengguna memilih salah satu saran, nilai yang dipilih (ui.item.value) otomatis dimasukkan ke dalam kolom pencarian.

Kurang lebih alur proses pada fitur autocomplete seperti ini :

1. Pengguna mengetik di kolom pencarian.
2. jQuery mengirimkan teks tersebut ke search.php melalui AJAX
3. search.php mengembalikan data dalam format JSON (misalnya: ["Laptop Lenovo", "Laptop Asus", "Laptop HP"]).
4. jQuery UI menampilkan hasil tersebut sebagai daftar saran di bawah kolom input.
5. Ketika salah satu saran diklik, nilai tersebut dimasukkan otomatis ke kolom pencarian.