Autocomplete Pada Form

Kamis, 06 November 2014

Hampir sama dengan artikel Merubah Isi Combobox, artikel ini menerapkan AJAX sebagai teknik untuk memanipulasi tampilan. Yang membedakan adalah, teknik ini menggunakan XML sebagai format data kembalian dari script PHP, dikarenakan jumlah data yang lebih banyak.

Simpan file ini dengan nama tesautocomplete.html:

<html><head>  <title>Tes Autocomplete</title></head> <body> <script type='text/javascript'>function createRequestObject() {     var ro;     var browser = navigator.appName;     if(browser == "Microsoft Internet Explorer"){         ro = new ActiveXObject("Microsoft.XMLHTTP");     }else{         ro = new XMLHttpRequest();     }     return ro; }  var xmlhttp = createRequestObject();  function cari(teks) {     var kode = teks.value;     if (!kode) return;     xmlhttp.open('get', 'getdata.php?kode='+kode, true);     xmlhttp.onreadystatechange = function() {         if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))         {              var r = xmlhttp.responseXML.getElementsByTagName('data');              document.getElementById("nama").value = r[1].firstChild.data;              document.getElementById("harga").value = r[2].firstChild.data;         }         return false;     }     xmlhttp.send(null);          } </script> <form>Kode: <input type="text" onchange="javascript:cari(this)"/><br/>Nama Barang : <input type="text" id="nama" /><br/>Harga : <input type="text" id="harga" /><br/></form></body></html>

File PHP, simpan dengan nama getdata.php:

<?php $kode = $_GET['kode']; $nama = ""; $harga = ""; if ($kode == "1") {     $nama = "satu";     $harga = "1000"; } else if ($kode == "2") {     $nama = "dua";     $harga = "2000"; } else {     $nama = "tidak ketemu";     $harga = "0"; }  header("content-type: text/xml"); echo " <xmlresponse><data>$kode</data><data>$nama</data><data>$harga</data></xmlresponse>"; ?>

Pada script utama (tesautocomplete.html), yang dilakukan adalah:

melihat perubahan pada textbox kode
jika kode dirubah (event onchange), maka fungsi cari( ) akan dijalankan
pada fungsi cari, diambil value dari kode yang diketikkan
mem-fetch script getdata.php dengan parameter kode sesuai value yang dipilih
user menunggu output dari getdata.php
script ambildata.php dijalankan, dan memproses kode yang diberikan
memberikan output sesuai dengan hasil proses
output diterima oleh javascript
data yang diterima, diparsing sesuai dengan tag "data"
masing-masing data ditampilkan pada field yang bersangkutan

Untuk mencoba script di atas, silakan masuk Tes Autocomplete.
Selamat coding :)

Source : http://www.bengkelprogram.com/data-artikel-331.0.bps