Studi Kasus penerapan Ajax yang seringkali dijadikan contoh atau referensi adalah untuk mengimplementasikan Autocomplete yang seringkali juga mengacu pada implementasi Google Suggestion di url : http://www.google.com/webhp?complete=1&hl=enAutocomplete adalah mekanisme menampilkan pilihan data yang ada berdasar input yang telah dimasukkan oleh pengguna.Misalkan Anda mengisi data di kotak teks pencarian Google Suggestion:benpLalu di bawah kotak pencarian Google menampilkan pilihan keyword yang diawali oleh benp tersebut.Berbagai pilihan keyword yang muncul tersebut merupakan hasil query dengan menggunakan pemrograman Ajax sehingga pada event onchange di kotak teks (textfield) browser melakukan query ke server Google dan menampilkan data tersebut.Pada kali ini penulis ingin mengajak pembaca melihat penggunaan YUI untuk pemrograman Autocomplete, tetapi saat ini penulis menggunakan data array yang ada di javascript bukan query ke server.Pertama-tama kita melihat kode untuk textbox yang akan digunakan untuk menampilkan mekanisme autocomplete dengan YUI.Pertama-tama kita mendefinisikan kotak teks yang akan digunakan untuk autocomplete,Pemrograman yang Anda sukai

Kotak teks input perlu kita beri id tertentu, pada contoh ini programmingInput, kemudian setelah kotak teks input, kita mendefinisikan area dengan tag div dengan id tertentu untuk menampilkan pilihan data autocomplete yang muncul di bawah kotak teks. Kemudian kotak teks dan div untuk menampilkan pilihan data utk autocomplete ditempatkan dalam div yang juga perlu kita tentukan atribut idnya.Setelah mendefinisikan kode HTMLnya, kita melangkah ke kode data array JAvascript yang akan digunakan sebagai sumber data autocomplete seperti kode berikut:

programmingArray = ["Java","Ruby","PHP","ASP.NET","Perl","Phyton","Cobol","Delphi"];

Setelah itu, kita perlu menuliskan kode untuk membuat bagaimana kotak teks dapat mencari data dari array ini dan menampilkan di bawah kotak teks apabila pengguna melakukan klik atau pengisian di kotak teks.Objek yang dapat digunakan untuk AutoComplete di YUI adalah YAHOO.widget.AutoComplete, dan cara membuat objek tersebut seperti berikut:var myAutoComp = new YAHOO.widget.AutoComplete (myInput,myContainer, myDataSource);myInput ini merupakan nilai id dari kotak teks yang digunakan utk autocomplete, pada contoh di atas adalah programmingInputmyContainer merupakan nilai parameter dari id dari tag div yang digunakan untuk menampilkan pilihan data autocompleteLalu myDataSource adalah objek datasource yang akan digunakan untuk mendapatkan sumber data dari autocomplete.DataSource ini ada 3 macam yaitu: Data array Javascript, Data array dari fungsi Javascript, atau data dari XMLHttpRequest disingkat XHRSekarang supaya lebih jelas, perhatikan kode berikut:myACJSArray = new function() {// Membuat objek Datasource dari data array javascriptthis.dataSourceku = new YAHOO.widget.DS_JSArray(programmingArray);// Membuat dan mengatur properti objek AutoCompletethis.oAutoComp = new YAHOO.widget.AutoComplete('programmingInput','programmingcontainer', this.dataSourceku);this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";this.oAutoComp.typeAhead = true;this.oAutoComp.useShadow = true;this.oAutoComp.minQueryLength = 0;//Mendefinisikan event handler untuk focus pada textboxthis.oAutoComp.textboxFocusEvent.subscribe(function(){var sInputValue = YAHOO.util.Dom.get('programmingInput').value;if(sInputValue.length === 0) {var oSelf = this;setTimeout(function(){oSelf.sendQuery(sInputValue);},0);}});};Dan jangan lupa menambahkan kode untuk CSS dan referensi ke Javascript dari YUI sehingga tampilan dan fungsi yang ada dapat berjalan dengan baik.Supaya lebih jelas, penulis menampilkan seluruh kode sebagai berikut di mana Penulis menyimpan kode ini sebagai file HTML di C:\Apache2\htdocs\yui, dan library yui di folder C:\Apache2\htdocs\yui\build (folder build ini didapat dari file zip hasil download YUI)

AutoComplete

/* custom styles for multiple stacked instances */#programmingAutocomplete {width:15em; /* set width here */padding-bottom:2em;}#programmingAutocomplete {z-index:9000; /* z-index needed on top instance for ie & sf absolute inside relative issue */}#programmingInput {_position:absolute; /* abs pos needed for ie quirks */}

Pemrograman yang Anda sukai

programmingArray = ["Java","Ruby","PHP","ASP.NET","Perl","Phyton","Cobol","Delphi"];

myJSArray = new function() {// Instantiate first JS Array DataSourcethis.dataSourceku = new YAHOO.widget.DS_JSArray(programmingArray);// Instantiate first AutoCompletethis.oAutoComp = new YAHOO.widget.AutoComplete(programmingInput,'programmingcontainer, this.dataSourceku);this.oAutoComp.prehighlightClassName = yui-ac-prehighlight;this.oAutoComp.typeAhead = true;this.oAutoComp.useShadow = true;this.oAutoComp.minQueryLength = 0;this.oAutoComp.textboxFocusEvent.subscribe(function(){var sInputValue = YAHOO.util.Dom.get(programmingInput).value;if(sInputValue.length === 0) {var oSelf = this;setTimeout(function(){oSelf.sendQuery(sInputValue);},0);}});};