Autocomplete Dengan PHP, MySQL, dan Jquery

Pada tutorial kali ini saya akan membahasa tentang Cara Membuat Autocomplete Dengan Menggunakan PHP, MySQL, Dan jQuery. Salah satu sosial media yang menyediakan autocomplete adalah facebook. Dimana saat kita ingin mencari profil teman dengan mengetikan sebagian nama teman kita di texbox search, maka sistem facebook akan langsung merekomendasikan nama teman-teman kita beserta foto profil yang namanya mirip dengan nama yang kita ketik di textbox search.

Dan pada tutorial ini kita juga akan mencoba membuat hal yang sama seperti facebook, dimana autocomplete ini bisa menampilkan foto, nama beserta email yang mirip dengan apa yang kita ketikan di textbox search.

Pertama persiapkan dulu tabel user untuk menyimpan data user

CREATE TABLE user (
    id_user int(11) NOT NULL AUTO_INCREMENT,
    nama_user varchar(30),
    email_user varchar(50),
    image_user varchar(50),
    PRIMARY KEY(id_barang)
)

Kemudian insertkan beberapa data user ke table tersebut

INSERT INTO user (nama_user, email_user, image_user) VALUES ('Adi Suandana', 'adisuandana@bangkan.net', 'images/laki.png');
INSERT INTO user (nama_user, email_user, image_user) VALUES ('Indra Permana', 'indrapermana@bangkan.net', 'images/laki.png');
INSERT INTO user (nama_user, email_user, image_user) VALUES ('Indah Setyati', 'indahstayti@bangkan.net', 'images/perempuan.png');
INSERT INTO user (nama_user, email_user, image_user) VALUES ('Angga Apriana', 'anggaapriana', 'images/laki.png');
INSERT INTO user (nama_user, email_user, image_user) VALUES ('anggisukarni@bangkan.net', 'images/perempuan.png');

Buat script koneksi ke database
koneksi.php

<?php
$hostdb ="localhost";
$usernamedb ="root";
$passworddb ="";
$database ="learn";
try{
 $con = new PDO("mysql:host=$hostdb;dbname=$database", $usernamedb, $passworddb, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(PDOException $err){
 echo $err->getMessage();
}
?>

Silahkan ganti value dari $hostdb, $usernamedb, $passworddb, $database, sesuaikan dengan database anda.

Selanjutnya buat file index untuk menampilkan textbox search beserta saran yang akan muncul

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete Menggunakan PHP/MySQL Dan jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/autocomplete.js"></script>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-form.css" />
</head>
<body>

<div class="container">
 <div class="header">
            <img src="images/anika-media.png"/>
        </div><!-- header -->
        <h1 class="main_title">Autocomplete Menggunakan PHP/MySQL Dan jQuery</h1>
 <div class="content">
  <b>Masukkan Nama:</b><br />
  <input type="text" class="search" id="searchid" placeholder="Search for people" />&nbsp; &nbsp; Ex:ad, an, ind<br /> 
  <div id="result"></div>
 </div>
 <div class="footer">
            Powered by <a href="http://www.anikamedia.com/">Anika Media</a> & <a href="http://www.bangkan.net/">Bangkan</a>
        </div><!-- footer -->
</div>
</body>
</html>

Selanjutnya buat file untuk memproses nama, email yang akan disarankan

ambil-user.php

<?php
include('koneksi.php');
if($_POST)
{
 $q=$_POST['search'];
 $qq = '%'.$_POST['search'].'%';
 $sql_res=$con->prepare("select id_user,nama_user,email_user, image_user from user where nama_user like (:q) or email_user like (:q) order by id_user LIMIT 5");
 $sql_res->bindParam(':q', $qq, PDO::PARAM_STR);
 $sql_res->execute();
 while($row=$sql_res->fetch(PDO::FETCH_ASSOC))
 {
  $username=$row['nama_user'];
  $email=$row['email_user'];
  $image = $row['image_user'];
  $b_username='<strong>'.$q.'</strong>';
  $b_email='<strong>'.$q.'</strong>';
  $final_username = str_ireplace($q, $b_username, $username);
  $final_email = str_ireplace($q, $b_email, $email);
  ?>
  <div class="show" align="left">
  <img src="<?php echo $image; ?>" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name" id="hasil"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
  </div>
  <?php
 }
}
?>

Sekarang buat sebuah folder baru di folder latihan anda, beri nama "js", kemudian di dalam folder js buat sebuah file javascript dengan nama autocomplete.js, dan isi dengan kode berikut

autocomplete.js

$(function(){
$("#searchid").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
 $.ajax({
 type: "POST",
 url: "ambil-user.php",
 data: dataString,
 cache: false,
 success: function(html)
 {
 $("#result").html(html).show();
 }
 });
}return false;    
});

jQuery("#result").live("click",function(e){ 
 var $clicked = $(e.target);
 var $name = $clicked.find('#hasil').html();
 var decoded = $("<div/>").html($name).text();
 $('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) { 
 var $clicked = $(e.target);
 if (! $clicked.hasClass("search")){
 jQuery("#result").fadeOut(); 
 }
});
$('#searchid').click(function(){
 jQuery("#result").fadeIn();
});
});

Kemudian buat sebuah folder dengan nama "css" di dalam folder latihan kita, selanjutnya buat sebuah file css di dalam folder css tersebut untuk mempercantik tampilan latihan autocomplete kita

style.css

* {
 margin: 0;
 padding: 0;
}
body {
 padding: 10px;
 background: #eaeaea;
 text-align: center;
 font-family: arial;
 font-size: 12px;
 color: #333333;
}
.container {
 width: 1000px;
 height: auto;
 background: #ffffff;
 border: 1px solid #cccccc;
 border-radius: 10px;
 margin: auto;
 text-align: left;
}
.header {
 padding: 10px;
}
.main_title {
 background: #cccccc;
 color: #ffffff;
 padding: 10px;
 font-size: 18px;
 line-height: 20px;
}
.content {
 padding: 10px;
 min-height: 300px;
}
.footer {
 padding: 10px;
 text-align: right;
}
.footer a {
 color: #999999;
 text-decoration: none;
}
.footer a:hover {
 text-decoration: underline;
}

style-form.css

#searchid
{
 width:500px;
 border:solid 1px #000;
 padding:10px;
 font-size:14px;
}
#result
{
 position:absolute;
 width:500px;
 padding:10px;
 display:none;
 margin-top:-1px;
 border-top:0px;
 overflow:hidden;
 border:1px #CCC solid;
 background-color: white;
}
.show
{
 padding:10px; 
 border-bottom:1px #999 dashed;
 font-size:15px; 
 height:50px;
}
.show:hover
{
 background:#4c66a4;
 color:#FFF;
 cursor:pointer;
}

Selanjutnya download jquery-1.8.0.min.js, kemudian copy di dalam folder js yang sudah dibuat tadi.

Langkah terakhir, Silahkan buat folder baru dengan nama images, selanjutnya download file images berikut, kemudian extract di dalam folder image tersebut.

Sekarang silahkan buka latihan anda.. Semoga bermanfaat :D