Cara Membuat Autocomplete Search dengan jQuery, PDO dan MySQL - Salam buat teman-teman sekalian, pada postingan kali ini saya akan coba share bagaimana membuat sebuah autocomplete search yang sederhana. Autocomplete Search ini sudah banyak digunakan berbagai web, dan situs terbesar seperti google dan facebook juga menggunakannya.
Sekarang, apa itu Autocomplete Search.? Dari yang saya kutip di wikipedia, autocomplete merupakan sebuah fitur yang diberikan aplikasi untuk memprediksi sisa kata yang diketik oleh pengguna. Jadi, autocomplete search adalah sebuah kata atau kalimat yang diketik oleh pengguna dan menampilkan hasil dari keyword atau kata kunci yang ketik tersebut. Masih bingung.? Oke, saya beri contoh : misalnya anda ke google.com dan membuat keyword(kata kunci), maka google memberikan sebuah kata atau kalimat dari keyword yang anda ketik tadi. Dari gambar dibawah anda bisa melihat contohnya.
Saya harap anda sudah paham, jadi pada postingan ini kita hanya membuatnya yang sangat sederhana dengan menggunakan fitur yang telah diberikan jquery.! Apalagi itu min jquery.? Dari yang saya kutip dari situs resminya di jquery.com. Jquery adalah sebuah library atau perpustakaan Javascript yang memiliki banyak fitur. Jquery ini memiliki size atau ukuran yang kecil, dan memiliki performa yang cepat. Dengan jquery anda dengan mudah mengembangkan aplikasi web. Dan untuk pengerti PDO dan MySQL, anda bisa mencarinya sendiri untuk mempersingkat waktu.
Oke langsung saja, hal pertama yang kita buat adalah database dan tabel beserta field dan record-recordnya. Jika anda malas membuatnya, anda bisa menggunakan script sql dibawah ini.
CREATE TABLE IF NOT EXISTS `country` (
`id_country` int(11) NOT NULL,
`country` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`id_country`, `country`) VALUES
(1, 'Indonesia'),
(2, 'Amerika');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `country`
--
ALTER TABLE `country`
ADD PRIMARY KEY (`id_country`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
MODIFY `id_country` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Jika database, tabel, field dan record sudah terbentuk, maka langkah selanjutnya yaitu melakukan koneksi ke database dengan pdo.
Baca selengkapnya : Cara Membuat aplikasi CRUD menggunakan PDO dan Bootstrap
Buat file php yang baru dengan nama connect.php, lalu terapkan script dibawah ini.
<?php
$serverhost = "localhost";
$username = "root";
$password = "";
$database = "blog_example";
try {
$conn = new PDO("mysql:host=$serverhost;dbname=$database", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//echo "Connection Success";
} catch ( PDOException $e ) {
echo "Connection Failed : ".$e->getMessage();
}
?> Penjelasan :
$serverhost = "localhost"; pada bagian ini merupakan nama dari host server anda.
$username = "root"; username dari host server anda.
$password = ""; password dari host server anda, disini saya memiliki password yang kosong.
$database = "blog_example"; nama database yang anda miliki, nama database yang saya miliki ialah "blog_example".
Langkah selanjutnya, ialah membuat tampilan form searchnya, disini saya menggunakan bootstrap dan saya memanggil file melalui CDN(Content Delivery Network), jadi saya sarankan menggunakan internet untuk membuat autocomplete search ini. Atau jika anda tidak ingin online, anda bisa mendownload bootstrapnya terlebih dahulu di getboostrap.com dengan begitu anda dapat membuat tampilan form bootstrap dengan offline. Buatlah file php yang baru dan beri nama index.php, lalu terapkan kode dibawah ini.
<html>
<head>
<title>Autocomplete</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#country").keyup(function() {
var search_value = $(this).val();
var datas = 'search='+search_value;
//jika tidak form search tidak kosong maka, lakukan aksi
if ( search_value != '' ) {
$.ajax({
type: 'post',
//nama file yang merupakan proses untuk menampilkan data pencarian
url: 'autocomplete.php',
data: datas,
success: function(data) {
$("#result").html(data).show();
}
});
}
return false;
});
});
function showData(val)
{
$("#search_value").val(val);
$("#result").hide();
}
</script>
<style type="text/css">
#search_keyword_id
{
width:300px;
border:solid 1px #CDCDCD;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:420px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CDCDCD solid;
background-color: white;
}
.show_result
{
font-family:tahoma;
padding:10px;
border-bottom:1px #CDCDCD dashed;
font-size:15px;
}
.show_result:hover
{
background:#364956;
color:#FFF;
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<form method="post">
<div class="form-group" style="margin-top: 50%;">
<input type="text" name="country" id="country" autocomplete="off" class="form-control">
<div id="result"></div>
</div>
</form>
</div>
</div>
</div>
</body>
</html> Saya rasa, penjelasan untuk script diatas sudah cukup.! Kita langsung ke langkah selanjutnya yaitu proses untuk menampilkan data nama negara.
<?php
//memanggil file connect
include "connect.php";
//jika form search mengandung nilai, maka lakukan langkah selanjutnya
if ( isset($_POST['search']) ) {
$search_key = $_POST['search'];
//query untuk menampilkan data nama negara berdasarkan keyword
$sql = "SELECT * FROM country WHERE country LIKE :keyword";
$stmt = $conn->prepare($sql);
$stmt->execute(array(':keyword'=>'%'.$search_key.'%'));
$result = $stmt->fetchAll();
//jika data nama negara tersebut ada, lakukan langkah selanjutnya
if ( $stmt->rowCount() > 0 ) {
$bold_keyword = '<strong>'.$search_key.'</strong>';
foreach ( $result as $key => $value ) {
echo "<div class=\"show_result\" onclick=\"showData('".$value['country']."');\"><span>".str_ireplace($search_key, $bold_keyword, $value['country'])."</span></div>";
}
} else {
echo "<div>Not Found</div>";
}
}
?> Nah, sekarang coba anda jalankan script yang telah kita buat tadi dengan memasukkan url localhost/autocomplete/index.php maka hasilnya akan seperti gambar dibawah ini.
Bagaimana.? Sangat sederhana bukan.? Anda dapat mengembangkanya sesuai keinginan anda. Oke, sampai disini tutorial Cara Membuat Autocomplete Search dengan JQuery, PDO dan MySQL semoga dapat bermanfaat. Tutorial ini jauh dari kata sempurna, jadi saya mengharapkan kritikan atau masukan dari anda. Sekian dan terima kasih.!
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
