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.

ike

emailnya_freez@... Jum'at Wage, 21 Juli 2006

aduuhh... bingung neh, yang di sini rata" pake php smuah, saya pake jsp, bisa minta situs yang bagus ga? klu bisa yg dari indonesia juga.

Ellen

ben@... Selasa Wage, 19 September 2006

Nice site! [url=http://falnnivh.com/qtox/kpff.html]My homepage[/url] | [url=http://sfbsxrqc.com/bmbv/pqzw.html]Cool site[/url]

Lori

maggie@... Selasa Wage, 19 September 2006

Thank you! http://falnnivh.com/qtox/kpff.html | http://lxjtlfpu.com/jkpj/bddk.html

ali

no_need_this@... Rabu Legi, 11 Oktober 2006

<?php $kode = $_GET['kode']; include"../module.php"; koneksi(); $perintah=mysql_query("SELECT * FROM master_pelanggan WHERE no_polisi='$kode'"); $hasil=mysql_fetch_array($perintah); kode=""; $model ="$hasil[1]"; $warna ="$hasil[2]"; header("content-type: text/xml"); echo " <xmlresponse> <data>$kode</data> <data>$model</data> <data>$warna</data> </xmlresponse> "; ?>

untuk code diatas kenapa file diserver ga mau ngirim/nampilkan isi database

si3ra

si3r4@... Kamis Pahing, 12 Oktober 2006

saya punya kasus gini: ada sekitar 100 pertanyaan, setiap 1 pertanyaan ada 3 buah jawaban rencananya saya mau pake 1 form aja buat semua pertanyaannya. terus buat membandingkan nilai jawaban yang diinputkan harus menggunakan database, gimana ya caranya???

bedul

si_beduls@... Jum'at Pon, 13 Oktober 2006

iya, sama dengan kasusnya bang ali, kenapa tidak bisa ngirim/nampilkan isi database ? errornya object require pada javascriptnya.

Eko Heri Kartolo

drembis79@... Sabtu Pahing, 11 November 2006

Artikel ini cukup menarik, jika kita kreatif maka dengan berbekal artikel ini kita bisa membuat desain web kita mirip seperti program desktop.
Aku sudah nyoba otak-atik script-nya dan ternyata OK punya.
Kalo om Parjo ngasih contoh script-nya pake PHP, disini aku nyoba pake asp, aku nggak bermaksut membandingkan PHP dan asp tapi cuman membuktikan aja kalo ajax itu flesibel dan tidak tergantung dari bahasa maupun platform tertentu.
Ini contoh script-nya..
.....tesautocomplete.htm....
<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.asp?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>
....getdata.asp....
<% Response.contentType="text/xml"%> <% dim kode dim nama dim harga kode =Request.QueryString.Item(1) select case kode case "1": nama="satu" harga="1000" case "2": nama="dua" harga="2000" end select response.write "<xmlresponse>" response.write "<data>" & kode & "</data>" response.write "<data>" & nama & "</data>" response.write "<data>" & harga & "</data>" response.write "</xmlresponse>" %>
OK..segitu dulu kalo ada pertanyaan, silahkan tanya ke om Parjo aja...

Wassalam
Eko Heri
Bekasi

virus

visrus@... Kamis Legi, 4 Januari 2007

ih kena spam yah commentna

Satya Adriansyah

satyaadriansyah@... Senin Pon, 5 Februari 2007

Bagaimana jika, saya ingin autocomplete keluar list secara otomatis dibawahnya, kemudian saya salah satu dari list tsb dibawahnya, setelah saya click kemudian isi dari form diisi dengan informasi berdasarkan yang dipilih. misal saya terdapat 2 isian : Kode Matakuliah | Nama Matakuliah | SKS Jika saya ketik pada posisi kode misal : E atau EK, atau EKM, maka dibawah Kode Mata kuliah keluar list Kode MK yang sesuai dengan inputnya, jika saya pilih list tersebut maka kolom kode, nama, sks di-isikan ke form tsb dan list tsb hilang. atau sebaliknya Jika saya ketik pada posisi nama misal : M atau MA, MAK atau MAKRO, maka muncul seluruh nama Matakuliah yang berhubungan dengan MAKRO, setelah dipilih maka seluruh isian form lamgsung terisi, dan list nama hilang. Mohon bimbingannya Terima kasih

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