Autocomplete Pada Form

Contoh script berikut ini menampilkan cara mengisi value field suatu form, tanpa harus melakukan submit data

Rabu Pahing, 5 April 2006

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 :)

Daftar Komentar

djupi

djupiter@... Jum'at Legi, 23 Juni 2006

Kalo datanya diambil dari database gimana caranya?

Rencana mo buat program sirkulasi untuk perpus gitu.

Ntar masukkan nama, trus keluar buku yang dipinjamnya.

URL: https://bengkelprogram.com/data-artikel-331.0.bps