Home > AJAX, PHP > Membuat Script Autocomplete dengan Hasil Lebih Dari Satu Text Field dengan PHP dan AJAX

Membuat Script Autocomplete dengan Hasil Lebih Dari Satu Text Field dengan PHP dan AJAX

Halo all… Apa Kabar? Lama tidak eksis di blog dikarenakan kesibukan yang sangat banyak (sok sibuk mungkin…:-D..)

Ide artikel saya kali ini berasal dari banyaknya permintaan dari teman-teman sekalian yang meminta untuk diberikan tips dalam mengatasi permasalahan dari artikel sebelumnya, yaitu Membuat Script Autocomplete dengan PHP dan AJAX dan Membuat Script Autocomplete Input Text Lebih dari Satu dengan PHP dan AJAX. Semoga permintaannya belum expired…hehehe….

Yang membedakan artikel kali ini dengan artikel sebelumnya adalah dari segi area/lokasi target. Jika sebelumnya hasil dari autocomplete di-click, maka akan mengisi 1 text field saja, maka kali ini saya akan mencoba memberikan sedikit tips untuk hasil isiannya menjadi lebih dari 1 text field.

Untuk databasenya, Anda dapat mendownload pada link berikut ini.

Kasusnya adalah seperti berikut apabila tersedia 3 buah text field, dimana ID Barang diinput oleh user, maka secara otomatis pemilihan hasil autocomplete akan mengisi nilai pada text field Nama Barang dan Jumlah Barang.

Autocomplete

Pertama kali kita membuat file search.html

<html>
<head>
<title>Membuat Script Autocomplete dengan Hasil Lebih Dari Satu Text Field dengan PHP dan AJAX</title>
<script language=’JavaScript’>var ajaxRequest;
function getAjax() //fungsi untuk mengecek AJAX pada browser
{
try
{
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser broke!”);
return false;
}
}
}
}function autoComplete() //fungsi menangkap input search dan menampilkan hasil search
{
getAjax();
input = document.getElementById(‘inputan’).value;if (input == “”)
{
document.getElementById(“hasil”).innerHTML = “”;
}
else
{
ajaxRequest.open(“GET”,”search.php?input=”+input);
ajaxRequest.onreadystatechange = function()
{
document.getElementById(“hasil”).innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
}function autoInsert(id, nama, jumlah) //fungsi mengisi input text dengan hasil pencarian yang dipilih
{
document.getElementById(“inputan”).value = id;
document.getElementById(“nama”).value = nama;
document.getElementById(“jumlah”).value = jumlah;
document.getElementById(“hasil”).innerHTML = “”;
}
</script>
</head>
<body>
<pre>
ID Barang   : <input type=’text’ onkeyup=”autoComplete();” id=’inputan’></pre><div id=’hasil’></div> <!– menampilkan hasil search –>
<pre>Nama Barang : <input type=’text’ id=’nama’ readonly><BR>
Jumlah      : <input type=’text’ id=’jumlah’ readonly><BR><BR>
</pre></body>
</html>

Keterangan:

function autoInsert(id, nama, jumlah) digunakan untuk menangkap nilai yang dikirim oleh link hasil pencarian barang, yang kemudian mengisi nilai dari text field yang diinginkan. Dalam contoh ini, text field yang diisi adalah ID barang, Nama Barang, dan Jumlah dimana perintah document.getElementById(“inputan”).value = id;  document.getElementById(“nama”).value = nama; document.getElementById(“jumlah”).value = jumlah; bertugas untuk mengisi text field.

Kemudian kita membuat file search.php yang menampilkan kemungkinan hasil search.

<?php
mysql_connect(“localhost”,”root”,””); /* koneksi */
mysql_select_db(“barang”);              /*  MySQL  */if (isset($_GET[‘input’]))
{
$input = $_GET[‘input’];$query = mysql_query(“SELECT id, nama, stock FROM barang WHERE id LIKE ‘%$input%'”); //query mencari hasil search
$hasil = mysql_num_rows($query);
if ($hasil > 0)
{
while ($data = mysql_fetch_row($query))
{
?>
<a href=”javascript:autoInsert(‘<?=$data[0]?>’,'<?=$data[1]?>’,'<?=$data[2]?>’);”><?=$data[1]?><BR> <!– hasil search –>
<?php
}
}
else
{
echo “Data tidak ditemukan”;
}}

else if(isset($_GET[‘id’]))
{
$id = $_GET[‘id’];
$query = mysql_query(“SELECT * FROM barang WHERE id=’$id'”);
$info = mysql_fetch_row($query);
echo “ID : “.$info[0].”<BR>Nama : “.$info[1].”<BR>Stock : “.$info[2];
}
?>

Karena fungsi autoInsert yang telah kita deklarasikan pada search.html menerima 3 buah variabel, maka link yang dibuat juga harus mengirimkan 3 buah nilai sesuai dengan urutan yang telah ditentukan, yaitu ID Barang, Nama, dan Jumlah.

Apabila Anda menjalankan script search.html, maka Anda akan memperoleh tampilan sebagai berikut :

autocomplete22

Apabila Anda mengklik Baju, maka text field Nama Barang dan Jumlah akan otomatis terisi dengan nilai yang sesuai dengan data yang dipilih. Untuk mendownload script, silakan pilih gambar berikut ini :

Download Script

Semoga artikel ini berguna bagi Anda dan jawaban dari pertanyaan Saudara Muhammad Agil dan Ikhwan Saputera. Terima kasih. Gbu… 

Categories: AJAX, PHP
  1. Edo
    2 November 2015 at 11:00

    Membantu sekali masss…

    Happy coding.. 😊

  2. odp
    11 June 2015 at 12:51

    Saya mau tanya, bagaimana cara menghindaribduplikasi saat pengetikan. misal saat mengetik “anak1” utk selanjutnya jika kita mengetik “a maka akan muncul otomatis opsi anak1. Tapi jika kita menambah data “anak2” utk selanjutnya saat mengetik “a tidak ada opsi otomatis yang sama akan keluar. Bisa bantu solusinya aga opsi otomatisnya bisa leluar walau data banyak. Terimakasih.

  3. 18 November 2014 at 11:19

    else if(isset($_GET[‘id’]))
    {
    $id = $_GET[‘id’];
    $query = mysql_query(“SELECT * FROM barang WHERE id=’$id'”);
    $info = mysql_fetch_row($query);
    echo “id suplier : “.$info[0].”Nama Suplier : “.$info[1].”Outstanding : “.$info[2];
    }

  4. 18 November 2014 at 11:19

    ini fungsi nya apa ya ?

    else if(isset($_GET[‘id’]))
    {
    $id = $_GET[‘id’];
    $query = mysql_query(“SELECT * FROM barang WHERE id=’$id'”);
    $info = mysql_fetch_row($query);
    echo “id suplier : “.$info[0].”Nama Suplier : “.$info[1].”Outstanding : “.$info[2];
    }

    kayaknya gak ada fungsi ya pada auto complete agan ?

    Mohon respon nya gan ?

  5. 10 April 2014 at 17:58

    kalo untuk database oracle gimana ya???

  6. sitinj
    7 April 2014 at 09:05

    bisa minta saran kalo koneksi ke oracle saat menampilkan isi query nya gimana ya..
    pengganti code ini

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: