Home > AJAX, PHP > Membuat Script Autocomplete dengan PHP dan AJAX

Membuat Script Autocomplete dengan PHP dan AJAX

Setelah sekian lama tidak eksis mengisi karena World Cup dan mengurus persiapan untuk wisuda, akhirnya artikel blog bertambah lagi…

Ide artikel saya kali ini adalah bagaimana caranya membuat script autocomplete. Mungkin beberapa dari Anda belum mengetahui yang namanya autocomplete. Autocomplete adalah salah satu bentuk search yang sering kita jumpai pada saat melakukan search di uncle Google.  Pada saat kita mengetikkan sebuah kata dalam sebuah input text maka akan muncul beberapa kata terkait dari pencarian kata yang Anda masukkan. Ketika Anda mengklik kata terkait yang muncul, maka input text akan terisi dengan kata yang kita klik. Itulah yang disebut autocomplete.

Artikel saya kali ini tidak jauh berbeda dengan artikel saya sebelumnya, yaitu Membuat Fasilitas Search seperti Facebook dengan PHP. Dalam pembuatan script autocomplete ini, saya menggunakan PHP dan dipadukan dengan AJAX.

Baiklah sudah cukup ceplas ceplos dari saya..hehehehe..Pertama kita membuat database dengan nama barang, berikut SQL dari barang.sql

CREATE TABLE `barang` (
`id` int(5) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`stock` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

INSERT INTO `barang` VALUES (1, ‘Baju’, 405);
INSERT INTO `barang` VALUES (2, ‘Celana’, 1);
INSERT INTO `barang` VALUES (3, ‘Kemeja’, 4);

Setelah database berhasil dibuat, kemudian kita membuat file dengan nama search.html

<html>
<head>
<title>Membuat Script Auto Complete 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() //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(nama) //fungsi mengisi input text dengan hasil pencarian yang dipilih
{
document.getElementById(“inputan”).value = nama;
document.getElementById(“hasil”).innerHTML = “”;
}
</script>
</head>
<body>
Nama Barang : <BR><input type=’text’ onkeyup=”autoComplete();” id=’inputan’>
<div id=’hasil’></div> <!– menampilkan hasil search –>
</body>
</html>

Setelah kita membuat file search.html, kemudian kita membuat file search.php untuk mencari hasil search berdasarkan kata yang telah kita input.

<?php
mysql_connect(“localhost”,”root”,””); /* koneksi */
mysql_select_db(“barang”); /* MySQL */if (isset($_GET[‘input’]))
{
$input = $_GET[‘input’];$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]?>’);”><?=$data[0]?><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];
}
?>

Apabila kita menjalankan file search.html (secara localhost) dan memasukkan nama barang yang kita cari, maka kita akan memperoleh tampilan seperti berikut ini:

Apabila kita memasukkan pada input text kata untuk mencari nama barang, maka akan muncul pilihan dari hasil search. Setelah kita memilih hasil search yang dimaksud, maka kata pada input text akan berubah menjadi hasil search yang kita pilih.

Semoga artikel ini dapat berguna bagi Anda. Gbu…

Categories: AJAX, PHP
  1. 18 September 2013 at 12:26

    gan kl buat autocomplete + chaining data bisa ndak ya….????? gmn caranya ksh tau sourcenya dong

  2. 28 July 2012 at 06:26

    Klo mau menampilkan data di dua atau lebih pada text gmana ya misalanya text = menampillan nama dan yang satu lagi menampikan jumlah, tks

    • 1 March 2013 at 23:23

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

  3. cheyong
    22 July 2012 at 22:30

    makasih ya. berguna sekali nih.

  4. 10 March 2012 at 10:17

    Salutt bro!! kebetulan nich.. lagi hobby bikin full ajax

  5. 27 December 2011 at 11:46

    THanks KAwan Infoya….

  6. dodowoo
    17 August 2011 at 17:33

    maaf nanya.
    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].”Nama : “.$info[1].”Stock : “.$info[2];
    }
    ‘id’ disni ambil dari mana ya di script sebelumnya?

    • 9 December 2011 at 21:33

      Maaf baru membalas…$_GET[‘id’] adalah id dari barang yang detail barangnya akan ditampilkan….

  7. DR10
    6 August 2011 at 12:33

    Kebetulan banget lg butuh script auto complete, thx bgt boss.

  8. 2 August 2011 at 09:25

    sangat bermanfaat. thanks alot…

  9. dis
    21 December 2010 at 17:14

    Oke bro, nanti gw coba2 lagi karena ad yg lebih urgent. Kalo hasilnya yg tampil ada 2 gmn caranya?
    Misalnya yg ketampil nama barang dan stocknya (Misal :

    Barang : Baju Stock : 10
    Barang : Celana Stock : 12)

    Trus kalo pas diklik yg keinput itu stocknya doang. Gmn ya bro?
    Mohon pencerahan dong

    thx

    • 21 December 2010 at 17:51

      kalo untuk menampilkan stoknya, Anda cukup mengubah query yang ada pada file search.php…

      Pada file search.php :
      Query : SELECT nama FROM barang WHERE nama LIKE ‘%$input%’

      Anda ubah menjadi SELECT nama, stok FROM barang WHERE nama LIKE ‘%$input%’ (misalnya)

      Kemudian pas untuk link yang a href di search.php menjadi :
      <a href=”javascript:autoInsert(‘’);”>

      ——————————————————————–
      Kemudian “Trus kalo pas diklik yg keinput itu stocknya doang”…maksudnya gimana??

      • dis
        22 December 2010 at 09:18

        udh bisa bos yg inputan. Balik ke pertanyaan awal nih, Kalo inputan lebih dari 1 gmn ya caranya?

      • 23 December 2010 at 19:47

        nanti saya jawab dalam artikel selanjutnya y??thanx..

  10. dis
    17 December 2010 at 12:35

    bro, kalo inputan textnya lbh dr 1 gmn ya?
    thx anw

  11. 2 December 2010 at 11:44

    Wah makasih brother…sangat bermanfaat ni…hehehe…di tunggu update an nya yang lebih menarik dan berguna lagi ya…

  12. 1 December 2010 at 11:00

    thx tutornya.. ijin sedot, sepengetahuan saya <?= memang tidak bisa berjalan di Xammp versi baru, bisa dganti dengan <?php echo ..

  13. 20 November 2010 at 13:03

    thx bos…. beda versi phpnya aja…. gara2 <?=….. kagak mau di sini , hohoho… thx bos….

    • 20 November 2010 at 22:19

      hehehe…mungkin karena pake XAMPP..soalnya kalo AppServ, tag PHPnya bisa…mungkin pake XAMPP versi lama y??

  14. 20 November 2010 at 12:58

    thx bos… tapi koq gak bekerja ya di saya, suggestionnya tidak keluar… apa browsernya ya?

  15. juhtz
    10 November 2010 at 23:05

    coool thanks banget kk tp klo mo klr hasil auto nya di input type text bs gak yh?
    ky drop down gt??

    • 10 November 2010 at 23:17

      bisa koq…hehehe…tapi itu harus ditambahkan dengan CSS lagi…hehehe…nanti y kalo ada waktu, saya post artikelnya…thanx…

  16. 30 October 2010 at 23:32

    thanks mas atas infonya boleh di coba

    • 31 October 2010 at 00:40

      sama-sama….hehehe…semoga bermanfaat bagi Anda..

  17. ahmad
    18 September 2010 at 20:00

    PERTAMAX gan…. ane rate deh postingan agan… thankyu gan.. ^_^’

  18. pajar
    2 September 2010 at 12:04

    thank’s gan, sangat bermafaat., artikelnya berfungsi dengan baik. mudah2an bermanfaat bagi yang lainnya jg.

  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: