Pencarian dengan Autocomplete dengan PHP dan Javascript

Mungkin kalian sudah pernah melihat pencarian sederhana yang akan mengeksekusi apabila kita menekan submit / tombol baru akan muncul yang kita cari. Disini kita akan membuat pencarian yang akan muncul seperti apa yang akan dituliskan, secara langsung  mari langsung saja kita membuatnya, persiapkan yang dibutuhkan mengerti php, mysql dan tentunya javascript.

1. Buat database academy dan buat table mahasiswa, terus inputkan beberapa record di tabel mahasiswa.

CREATE TABLE mahasiswa (`nim` VARCHAR( 5 ) NOT NULL ,`nama` VARCHAR( 50 ) NOT NULL ,`fak` VARCHAR( 20 ) NOT NULL ) ENGINE = MYISAM;

INSERT INTO mahasiswa (nim ,nama,fak)
VALUES (‘E001’, ‘Endah’, ‘Ekonomi’),(‘E002’, ‘Dedi’, ‘Ekonomi’), (‘E003’, ‘Rohmat’,’Ekonomi’), (‘H001’, ‘Heru’, ‘Hukum’), (‘H002’, ‘Anna’, ‘Hukum’);

2. Buat Form pencarian

<head>
<title>Pencarian Ajax, PHP dan MySQL</title>
</head>
<body>
 <script language="javascript" src="cari_ajax.js"></script>
 <form>
 <font face='verdana' size='2'>Pencarian Nama Mahasiswa </font>
 <input type='text' name='' id='searching' size='25' onkeyup='mahasiswa(searching.value)' />
 </form>
 <div id="pencarian"></div>
 </body>
 </html>

3. Buat script javascript, simpan dengan nama “cari_ajax.js”

var xmlhttp = false;

try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}

//untuk pencarian mahasiswa
function mahasiswa(searching){
var obj=document.getElementById("pencarian");
var url='proses_cari_ajax.php?searching='+searching;

xmlhttp.open("GET", url);

xmlhttp.onreadystatechange = function() {
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
obj.innerHTML = xmlhttp.responseText;
} else {
obj.innerHTML = "<div align ='center'><img src='ajax-loader.gif' alt='Loading' />Harap Bersabar</div>";
}
}
xmlhttp.send(null);
}

4. Buat pencarian dari pencarian “cari_ajax.js” ke pencarian dengan php, simpan dengan nama proses_cari_ajax.php.

<?
//buat konkesi
$koneksi=mysql_connect("localhost","root","");
mysql_select_db("academy",$koneksi);

//pencarian nama
echo "<font face=verdana size=2px>Data Mahasiswa yang anda cari : </font>".$key=$_GET['searching'];
$data=mysql_query("SELECT * FROM mahasiswa WHERE nama LIKE '%$key%' ",$koneksi);
$ada_hasil=mysql_num_rows($data);

if($ada_hasil)
{
echo"<table border='1' cellpadding='0' cellspacing='0' >
<tr>
<td>No</td>
<td>NIM</td>
<td>Nama</td>
<td>Fakultas</td>
</th>";
while($data_ketemu=mysql_fetch_array($data))
{
$no=$no+1;
echo"    <tr>
<td>$no</td>
<td>$data_ketemu[nim]</td>
<td>$data_ketemu[nama]</td>
<td>$data_ketemu[fak]</td>
</tr>";
}
echo"</table>";
}
else
{
echo"<br><b>Belum ada data!!</b>";
}
?>

silahkan di coba dan dimodifikasi sendiri, semoga bermaanfaat dan bisa menambah ilmu bagi teman-teman.

Untuk gambar loading, kalian bisa mendownload langsung di http://www.ajaxload.info/.

Silahkan download contoh aplikasi diatas disini.

Tentang -=N N=-

Simple Thinks
Pos ini dipublikasikan di JavaScript, MySQL, PHP. Tandai permalink.

2 Balasan ke Pencarian dengan Autocomplete dengan PHP dan Javascript

  1. toko tas online berkata:

    sangat bermanfaat sekali ilmunya bro, hatur nuhun, di download ya🙂

    • -=N N=- berkata:

      masama mz bro…ilmu yang kita punya walaupun masih sedkit tp bisa berguna bagi orang lain..dapat memberikan semangat bagi orang lain utnuk lebih maju…seep

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s