Cara membuat auto complete search menggunakan ajax

auto complete search menggunakan ajaxCara membuat auto complete search menggunakan ajax

Membuat auto complete search atau pencarian otomatis pada dasarnya hampir sama dengan cara pada artikel ane Mengisi form otomatis dengan ajax. Bedanya adalah pada artikel tersebut memakai combo box. Nah disini akan ane jelaskan bagaimana cara membuatnya untuk input text field yang bisa difungsikan sebagai pencarian otomatis atau bisa juga untuk pengisian form otomatis. Yuk ikutin langkah – langkah pembuatannya.

Kali ini ane menggunakan jQuery dan jQuery-UI serta bootstrap untuk membuat auto complete search supaya memudahkan pemakaian javascript, ajax dan stylenya. Selanjutnya buatlah sebuah file php atau html, misalnya cari.php dan isi file tersebut dengan script sebagai berikut:

Silahkan disesuaikan dengan bentuk design, isi content, dan url asset / resources sesuai dengan kebutuhan ente. Pada code diatas, terdapat sebuah asset js “cari.js”. File cari.js merupakan code javascript yang akan kita buat. Berikut ini penampakannya:

Lah dikit amat code nya mas broh? Ya mau gimana lagi, emang cuma segitu. Lagian itu juga blom disesuaikan dengan script punya ente. Perintah $(‘#txtNumber’).autocomplete() berasal dari plugin jquery-ui, disitulah salah satu kunci keberhasilan auto complete search menggunakan ajax-nya. Nah pada code diatas juga terdapat “source’. Source tersebut bisa berisi array, object, function, atau nama file php untuk mengambil dari data server, tentunya dengan bantuan php. Yuk mari kita lihat isi file caridata.php:

Dalam auto complete search menggunakan ajax ini ane tidak menggunakan data yang berasal dari database, melainkan dari sebuah yang menyimpan data dalam bentuk json. Jika ente ingin menggunakan database, silahkan aja, ga masalah kok, tinggal diganti aja $data-nya. Trus isi file data.json itu apa? Nih isinya:

Gampangkan buatnya? Demikianlah artikel Cara membuat auto complete search menggunakan ajax, jika ada yang kurang jelas atau mau memberikan saran, silahkan diisi comment nya yah. BTW penampakan hasilnya sama seperti gambar diawal artikel ini.

6 comments

Leave a Reply

Your email address will not be published. Required fields are marked *