Buscar

Contoh Ajax Sederhana Menggunakan Onkeyup

AJAX digunakan untuk membuat aplikasi agar lebih interaktif.
Kali ini saya akan memberikan contoh yang menunjukkan bagaimana sebuah halaman web dapat berkomunikasi dengan server web, dengan tipe karakter yang dimasukan ke dalam input text.
Ketika kita memasukan inputan berupa karakter, fungsi "showHint ()" dijalankan. Fungsi ini dipicu oleh "onkeyup".
Jika field input kosong (str.length == 0), fungsi membersihkan isi placeholder txtHint dan tidak menjalankan fungsi. Jika field input tidak kosong, maka fungsi showHint () dijalankan.
Langkah pertama kita buat file dengan nama latihan_ajax.php.
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<b>Input Nama Kota:</b>
<form>
Masukan Kota: <input onkeyup="showHint(this.value)" type="text" />
</form>
Suggestions: <span id="txtHint" style="font-family: Verdana, Geneva, sans-serif;"> </span>
</body>
</html>
Halaman pada server yang dipanggil oleh JavaScript di atas adalah file PHP yang disebut "gethint.php".  
<?php
//array menyimpan nama kota
$a = array('MEDAN','PEKANBARU','BATAM','PADANG','PALEMBANG','LAMPUNG','BENGKULU','BANDUNG','SERANG','CIREBON',
   'SEMARANG','YOGYAKARTA','SURABAYA','MALANG','BALIKPAPAN','BANJARMASIN','MAKASSAR','MANADO','PALU','JAYAPURA',
   'SORONG','DENPASAR','KUPANG','MATARAM','JAKARTA','PONTIANAK','AMBON','TERNATE','BANDA ACEH','LHOKSEUMAWE');

//get parameter q dari URL
$q=$_REQUEST["q"]; $hint="";

//cek kata apakah sama atau beda
if ($q !== "")
  { $q=strtolower($q); $len=strlen($q);
    foreach($a as $name){ 
  if (stristr($q, substr($name,0,$len))){ 
   if ($hint===""){ 
    $hint=$name; 
   }else{ 
    $hint .= ", $name"; 
   }
      }
    }
  }

//out put no suggestion jika data tidak ada yang sama
echo $hint==="" ? "no suggestion" : $hint;
?> 
Outputnya sebegai berikut :
 Selamat mencoba.

2 comments:

imam kharistiyan

wah, bagus nih postingan, ijin comot mbak,, hehehe,
sekalian mau tanya, itu kan saranya dari array,
klo saranya ngambil dari database gimana ya???
maaf menggangu

Permata Mertan

ada tutorial dasar banget nih gan, jadi cepet paham https://www.youtube.com/watch?v=5OHin1oQoXQ

Posting Komentar