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=en
Autocomplete adalah mekanisme menampilkan pilihan data yang ada berdasar input yang telah dimasukkan oleh pengguna.
Misalkan Anda mengisi data di kotak teks pencarian Google Suggestion:
benp
Lalu 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,
<h3>Pemrograman yang Anda sukai</h3>
<div id="programmingAutocomplete">
<input id="programmingInput">
<div id="programmingcontainer"></div>
</div>
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:
<script type="text/javascript">
programmingArray = [
"Java",
"Ruby",
"PHP",
"ASP.NET",
"Perl",
"Phyton",
"Cobol",
"Delphi"
];
</script>
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 “programmingInput”
“myContainer” merupakan nilai parameter dari id dari tag div yang digunakan untuk menampilkan pilihan data autocomplete
Lalu 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 XHR
Sekarang supaya lebih jelas, perhatikan kode berikut:
myACJSArray = new function() {
// Membuat objek Datasource dari data array javascript
this.dataSourceku = new YAHOO.widget.DS_JSArray(programmingArray);
// Membuat dan mengatur properti objek AutoComplete
this.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 textbox
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);
}
});
};
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:Apache2htdocsyui, dan library yui di folder C:Apache2htdocsyuibuild
(folder build ini didapat dari file zip hasil download YUI)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>AutoComplete</title>
<link rel=”stylesheet” type=”text/css” href=”./build/fonts/fonts-min.css” />
<link rel=”stylesheet” type=”text/css” href=”./build/autocomplete/assets/skins/sam/autocomplete.css” />
<script type=”text/javascript” src=”./build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script type=”text/javascript” src=”./build/animation/animation.js”></script>
<script type=”text/javascript” src=”./build/autocomplete/autocomplete.js”></script>
<!–begin custom header content for this example–>
<style type=”text/css”>
/* 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 */
}
</style>
</head>
<body class=”yui-skin-sam”>
<h3>Pemrograman yang Anda sukai</h3>
<div id=”programmingAutocomplete”>
<input id=”programmingInput”>
<div id=”programmingcontainer”></div>
</div>
<script type=”text/javascript”>
programmingArray = [
"Java",
"Ruby",
"PHP",
"ASP.NET",
"Perl",
"Phyton",
"Cobol",
"Delphi"
];
</script>
<!– In-memory JS array ends–>
<script type=”text/javascript”>
myJSArray = new function() {
// Instantiate first JS Array DataSource
this.dataSourceku = new YAHOO.widget.DS_JSArray(programmingArray);
// Instantiate first AutoComplete
this.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);
}
});
};
</script>
</body>
</html>