Home > AJAX, PHP > Membuat Script Autocomplete Input Text Lebih dari Satu dengan PHP dan AJAX

Membuat Script Autocomplete Input Text Lebih dari Satu dengan PHP dan AJAX

Ide artikel saya kali merupakan lanjutan dari artikel saya sebelumnya, yaitu Membuat Script Autocomplete dengan PHP dan AJAX. Artikel kali ini juga sekaligus menjawab permasalahan dari Saudara dis yang menanyakan tentang hal yang berhubungan dengan artikel kali ini.

Yang membedakan dengan artikel sebelumnya adalah pada artikel sebelumnya, kita hanya menggunakan 1 input text untuk membuat autocomplete. Nah, untuk artikel kali ini, kita dapat menggunakan lebih dari 1 input text untuk membuat autocomplete. Sehingga kita membutuhkan suatu angka untuk memberi identitas bahwa input text tersebut adalah input text yang ke berapa. Dalam hal ini, angka tersebut saya namakan dengan variabel idInput yang akan ditangkap dalam AJAX.

Untuk databasenya, Anda dapat mendownload pada link berikut ini.

Pertama kita membuat file search.html :

<html>
<head>
<title>Membuat Script Auto Complete Input Text Lebih dari Satu dengan PHP AJAX by Erick Alfons Lisangan</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(idInput) //fungsi menangkap input search dan menampilkan hasil search berdasarkan //idInput text yang dijadikan indikator search
{
getAjax();
input = document.getElementById(‘inputan’+idInput).value;

if (input == “”)
{
document.getElementById(“hasil” + idInput).innerHTML = “”;
}
else
{
ajaxRequest.open(“GET”,”search.php?input=”+input+”&idinput=”+idInput);
ajaxRequest.onreadystatechange = function()
{
document.getElementById(“hasil” + idInput).innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
}

function autoInsert(nama, idInput) //fungsi mengisi input text dengan hasil pencarian yang dipilih
{
document.getElementById(“inputan”+idInput).value = nama;
document.getElementById(“hasil”+idInput).innerHTML = “”;
}
</script>
</head>
Nama Barang : <BR><input type=’text’ onkeyup=”autoComplete(1);” id=’inputan1′>
<div id=’hasil1′></div> <!– menampilkan hasil search untuk Input Text 1–>

Nama Barang : <BR><input type=’text’ onkeyup=”autoComplete(2);” id=’inputan2′>
<div id=’hasil2′></div> <!– menampilkan hasil search untuk Input Text 2–>
</body>
</html>

Keterangan :

<div id=’hasil1′> menunjukkan bahwa div tersebut digunakan untuk menampilkan hasil search dan autocomplete untuk inputan dari input text yang pertama. Begitu juga untuk <div id=’hasil2′> menunjukkan bahwa div tersebut digunakan input text yang kedua, dan seterusnya.

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

<?php
mysql_connect(“localhost”,”root”,””); /* koneksi */
mysql_select_db(“barang”); /* MySQL */ 

$input = $_GET[‘input’];
$idinput = $_GET[‘idinput’];

$query = mysql_query(“SELECT nama FROM barang WHERE nama 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]?>’,'<?=$idinput?>’);”><?=$data[0]?><BR> <!– hasil search –>
<?php
}
}
else
{
echo “Data tidak ditemukan”;
}
?>

Dalam file tersebut, tetap kita menggunakan nilai dari variabel idinput, yang akan digunakan untuk memberi nilai pada input text ke berapa yang digunakan sebagai indikator searchnya.

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

Untuk mendownload script, silakan pilih gambar berikut ini :

Semoga artikel ini berguna bagi Anda dan jawaban dari pertanyaan Saudara dis. Terima kasih. Gbu… 

Categories: AJAX, PHP
  1. ingga
    31 January 2013 at 18:34

    btw..
    script ni

    $input = $_GET[‘input’];
    $idinput = $_GET[‘idinput’];

    nah.. id input dapat value dari mana..

    asli saya bingung dengan script buat menambah unik id.. dengan menambahkan idinputan..
    saya bingung logikanya..

    en gan..
    >< kq cara penulisan scriptnya banyak yg error ya..
    penggunaan '' dengab ""
    dan “ dengan ''

    • 1 March 2013 at 22:46

      Maaf baru balas…hehehe….masalah kutip untuk PHP versi terbaru memang pemanggilan variabel GET/POST HARUS menggunakan tanda petik dua (“)…:)

  2. muhammad agil
    16 December 2012 at 19:54

    Mau Tanya , kalau inputannya satu dan hasilnya dibagi dua div, bagaimna caranya
    Mohon pencrrahanny

    • 1 March 2013 at 23:24

      Silahkan dilihat pada artikel terbaru saya Membuat Script Autocomplete dengan Hasil Lebih Dari Satu Text Field dengan PHP dan AJAX. Semoga berguna…:)

  3. muhammad agil
    16 December 2012 at 19:52

    Mau Tanya , kalau inputannya satu dan hasilnya dibagi dua div, bagaimna caranya
    Mohon pencrrahannya
    Makasih

  4. rara
    13 December 2011 at 08:39

    sy sdh nyoba dan berjalan tp nnama baju atau celana tdk ada yg muncul seperti pd screen diatas.. mohon penjelasannya mass..

  5. rara
    9 December 2011 at 22:18

    mass.. kok sy g bs nyoba yah..
    databasenya g bisa muncul..

    • 10 December 2011 at 09:43

      databasenya bisa diambil pada artikel Membuat Script Autocomplete dengan PHP dan AJAX

  6. El Hilal
    9 July 2011 at 16:57

    Mas, kalo combobox lebih dari satu gmna yah??? Tentunya pake php n ajax, tolong donk. Makasih,

    • 9 December 2011 at 21:25

      Maaf baru membalas…combobox??maksudnya bagaimana??

  7. heru
    19 May 2011 at 13:00

    boss… apanya yang keliru neh..??

    Nama Barang :
    0) { while ($data = mysql_fetch_row($query)) { ?>
    Nama : “.$info[1].”
    Stock : “.$info[2]; } ?>

    • 19 May 2011 at 20:01

      mank pesan errornya dikatakan apa??

      bukannya harusnya begini??
      Nama Barang :

      Nama : “.$info[1].”
      Stock : “.$info[2]; } ?>

      • heru
        23 May 2011 at 12:12

        maksudnya saat text field kita isi, yang tampil dibawahnya
        0) { while ($data = mysql_fetch_row($query)) { ?>
        Nama : “.$info[1].”
        Stock : “.$info[2]; } ?>

  8. nova
    14 May 2011 at 04:24

    pak,kalau mau input filenya dengan cara enter,jadi tidak perlu klik ,bagaimana pak? trus pilihannya bisa dipilih dengan menekan tombol navigasi kebawah (v).

    mohon bantuannya,pak.

  9. jamal
    22 March 2011 at 10:43

    ilmunya sangat membantu sekali bos terutama bagi saya yg masih pemula di dunia PHP, kalo boleh saya juga ingin tanya : kalo ingin input text hanya dalam satu pengisian tetapi input text yang lainnya terisi gimana ya.. jadi mengisinya tidak di setiap input text cukup dengan IDnya saja, input text yg lainnya terisi berdasarkan IDnya.. mohon pencerahannya.. terima kasih

    • 22 March 2011 at 21:21

      thanx sebelumnya..hmm…maksudnya dalam 1 halaman terdapat lebih dari 1 input text…untuk pengisiannya dilakukan pada 1 input text tetapi input text yang lain juga ikut terisi y?kalo benar seperti gitu, cukup ubah saja fungsi autoInsert menjadi seperti di bawah iniL

      function autoInsert(nama, idInput)
      {
      n = 3; //jumlah input text pada halaman
      for (i=0;i<n;i++)
      {
      document.getElementById(“inputan”+i).value = nama;
      }
      document.getElementById(“hasil”+idInput).innerHTML = “”;
      }

      thanx…jangan lupa Like Page Blog Ini di Facebook y?Gbu…

  10. dis
    5 January 2011 at 12:09

    dis :
    You are the man..
    makasi bgt bos..

    O ya bos satu lagi, data saya kan bnyak bgt nih. Buat ngebatesin tingginya gmn ya caranya? misal tingginya 5 data tampil, trus sisanya bisa di scroll. Ya kyk browser2 gt bos. Makasi ya bos

    • 5 January 2011 at 19:44

      kl begitu harus ditambahkan dengan CSS…..

      • 25 April 2011 at 20:21

        caranya gmna ?
        cz, ane prnah nyoba, gk bisa-bisa…

        tlong bantuannya…mas….

  11. dis
    5 January 2011 at 10:23

    You are the man..
    makasi bgt bos..

  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: