Tutorial Pemrograman Ajax Autocomplete dengan Sumber data Array Javascript dengan Yahoo User Interface (YUI)







Harga Handphone, Harga Blackberry, Harga Laptop, Harga Mobil, Harga Motor

DAPATKAN BUKU GRATIS DARI BUKUKITA.COM, CARANYA KLIK DISINI!!!

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>

Bagaimana Ramalan Harian, Ramalan Zodiak Harian, Ramalan Mingguan, Zodiak Mingguan, Ramalan Zodiak Mingguan Anda?

Cek Harga HANDPHONE, MOTOR dan Harga Lainnya di www.harganya.com!

Facebook

Twitter