Wednesday, July 17, 2013
Kemarin sudah membahas tentang datepicker, yaitu sebuah fungsi dari jQuery (dibaca: jekueri) untuk mempermudah dan mempercantik tampilan dalam mengisi tanggal. Nah, sekarang saya mau membeberkan sebuah fungsi yang powerfull lagi dari jQuery ini. Nama fungsi yang saya maksud adalah "Auto Complete". Jadi ini sebuah fungsi yang berguna untuk melengkapi atau memberikan suggest terhadap masukkan yang kita isikan kedalam form. Sederhananya, misalkan kita tulis "A", maka akan muncul pilihan yang mengandung unsur "A". Mirip dengan yang ada di "Google Search", kan kalau kita ketik muncul suggest dari Google. Seperti itulah kira-kira.
Oke, ayo kita lihat skrip nya langsung. Skrip ini saya ambil langsung dari jQueryui.com
Bagian Tags
Dibagian ini mendeklarasikan fungsi "autocomplete" serta source yang digunakan sebagai wadah yang menyimpan kata-kata yang digunakan untuk proses "Auto Complete". Dimana kita mendefinisikan kata-kata tersebut? Ayo lihat bagian berikutnya.
Bagian Source
Nah, pada bagian ini kita mendefinisikan untuk Souce tersebut. Apabila menggunakan database, silahkan lakukan query dalam [] tersebut. Silahkan bereksperimen saja. Pada contoh ini, Source tersebut diisi dengan kata-kata berupa Bahasa Pemrograman. Sehingga apabila diketikkan sebuah huruf, maka kata-kata dalam Source ini lah yang akan muncul.
Bagian Div
Pada bagian inilah kita mendefinisikan dimana fungsi "Auto Complete" akan dijalankan. Jadi ketika membuat fungsi pada JavaScript kita harus benar-benar memperhatikan pada penulisan "id" dan "class". Karena apabila terjadi kesalahan dalam menggunakan id atau class, maka besar kemungkinan fungsi tersebut tidak jalan. Sehingga proses Auto Complete gagal terlaksana.
Bagian Path File
Nah, kalo yang ini adalah tempat dimana kita mendefinisikan lokasi file jQuery kita, jadi harus ditulis dengan benar, kalau salah maka fungsi dari jQuery tidak akan jalan.
Kalo semua bagian telah disesuaikan dengan benar, maka "Auto Complete" yang cantik telah bisa kita gunakan pada Form yang kita buat. Simple kan?
Bagian terpenting dari skrip ini akan saya bahas satu-persatu.<!doctype html><html lang="en"><head><meta charset="utf-8" /><title>jQuery UI Autocomplete - Default functionality</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><script>$(function() {var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];$( "#tags" ).autocomplete({source: availableTags});});</script></head><body><div class="ui-widget"><label for="tags">Tags: </label><input id="tags" /></div></body></html>
Bagian Tags
$( "#tags" ).autocomplete({source: availableTags});
Bagian Source
$(function() {var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
Nah, pada bagian ini kita mendefinisikan untuk Souce tersebut. Apabila menggunakan database, silahkan lakukan query dalam [] tersebut. Silahkan bereksperimen saja. Pada contoh ini, Source tersebut diisi dengan kata-kata berupa Bahasa Pemrograman. Sehingga apabila diketikkan sebuah huruf, maka kata-kata dalam Source ini lah yang akan muncul.
Bagian Div
<div class="ui-widget"><label for="tags">Tags: </label><input id="tags" /></div>
Bagian Path File
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" />
Kalo semua bagian telah disesuaikan dengan benar, maka "Auto Complete" yang cantik telah bisa kita gunakan pada Form yang kita buat. Simple kan?
