Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP

Cara Membuat Autocomplete Dari Database Dengan jQuery dan PHP - Kali ini kita akan belajar membuat Autocomplete field yang datanya berasal dari database ( MySQL ), data akan di ambil menggunakan bantuan jQuery dan PHP. Autocomplete adalah fitur yang berfungsi memberikan sugesti prediksi data dari inputan oleh user sehingga mempermudah dan mempercepat proses input. konsepnya adalah dengan cara mencocokan setiap karakter yang dimasukan oleh user dengan data yang telah ada atau disimpan di dalam database.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

Database

Pertama buatlah sebuah database terlebih dahulu dengan nama db_anime kemudian buatlah sebuah table di dalamnya dengan nama tbl_anime dengan struktur :

Name	Type	Size	Extra	Primary
id	INT	100	auto_increment	yes
nama_anime	VARCHAR	50

Masukan beberapa data dummy sebagai contoh

jQuery

Buatlah sebuah folder di dalam webserver anda dengan nama Autocomplete kemudian buatlah lagi sebuah folder dengan nama js

Downloadlah jQuery UI di situs resminya di sini : DOWNLOAD

Downloadlah jQuery di situs resminya di sini : DOWNLOAD

Kemudian exstrak keduanya di dalam folder js

PHP

Buatlah sebuah file PHP di dalam folder Autocomplete dengan nama data.php dengan isi script :

<?php
//connect ke database
  mysql_connect("localhost","root","");
  mysql_select_db("db_anime");
//harus selalu gunakan variabel term saat memakai autocomplete,
//jika variable term tidak bisa, gunakan variabel q
$term = trim(strip_tags($_GET['term']));
 
$qstring = "SELECT * FROM tbl_anime WHERE nama_anime LIKE '".$term."%'";
//query database untuk mengecek tabel anime 
$result = mysql_query($qstring);
 
while ($row = mysql_fetch_array($result))
{
    $row['value']=htmlentities(stripslashes($row['nama_anime']));
    $row['id']=(int)$row['id'];
//buat array yang nantinya akan di konversi ke json
    $row_set[] = $row;
}
//data hasil query yang dikirim kembali dalam format json
echo json_encode($row_set);
?>

File ini berfungsi untuk koneksi database kemudian file akan melakukan pencarian data dalam tabel dari inputan yang dimasukan oleh user kemudian dicocokan dengan field nama_anime jika bertemu yang cocok kemudian data di kembalikan dalam format json untuk di tampilkan sebagai sugesti autocomplete.

Buatlah sebuah file PHP baru di dalam folder Autocomplete dengan nama index.php dengan isi script :

<!doctype html>
  
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Autocomplete dari database dengan jQuery dan PHP | Jin Toples Programming</title>
 <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet"
    href="js/jquery-ui.css" />
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery-ui.js"></script>
 
    <script>
/*autocomplete muncul setelah user mengetikan minimal2 karakter */
    $(function() {  
        $( "#anime" ).autocomplete({
         source: "data.php",  
           minLength:2, 
        });
    });
    </script>
</head>
<body>
<div class="wrap">
 <h1>Jin Toples Programming</h1>
    <h1>Autocomplete dari database dengan jQuery dan PHP</h1>
 <div class="ui-widget">
  <label for="anime">Judul Anime : </label>
  <input id="anime"  />
 </div>
 <p class='copy'>Copyright &copy <a href="http://www.jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>

CSS

Sekarang untuk style tampilannya buatlah sebuah file CSS di dalam folder Autocomplete dengan nama style.css dengan isi script :

<style>
 *{
  margin: 0;
        padding: 0;
    }
 a{
  text-decoration: none;
        color: #333;
    }
    body {
        text-align:center;
        background-color:#61b3de;
        font-family:Arial, Helvetica, sans-serif;
  font-size:80%;
  color:#666;
 }
 .wrap {
  background: #f3f8fb;
        width:730px;
  margin:30px auto;
  border: 4px dashed #61b3de;
  border-radius:4px;
  padding: 20px 5px;
 }
 h1 {
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:170%;
 color:#645348;
 font-style:italic;
 text-decoration:none;
 font-weight:100;
 padding: 10px;
 }
</style>

Autocomplete Dari Database Dengan jQuery dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran. silahkan baca tutorial jQuery dan PHP lainnya.

*Notes Jika sugesti tidak muncul
- Perhatikan baik - baik nama dari file JS nya di index.php pastikan file jQuery dan jQuery UI terload
- Perhatikan baik - baik nama field dan tabel anda yang ada di databse sudah sama dengan yang di data.php

Anda juga dapat mendownload file jadinya di sini : DOWNLOAD