Jquery Autocomplete dengan Typehead Bootstrap dan PHP MySQL
Penggunaan autocomplete sangat membantu user ketika akan memilih /mengisi sesuatu, tidak diperlukan pengetikan seluruh karakater, cukup hanya beberapa karakter maka akan muncul semacam list yang mungkin kita kehendaki. Dengan demikian proses input menjadi lebih cepat.
Berikut ini adalah hasil akhir yang akan kita buat dalam tutorial autocomplete, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Langkah-langkah membuat autocomplete
1. Membuat Database
Terlebih dahulu buatlah sebuah database, disini kita menggunakan mysql. Berinama databasenya "dbkota", kemudian create table yang diberinama "kota" dan berisikan field id dan field nama_kota seperti script dibawah ini :
CREATE TABLE IF NOT EXISTS `kota` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama_kota` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
Kemudian kita isi data-datanya kedalam tabel berikut. Bisa melalui interface phpmyadmin langsung atau melalui script seperti dibawah ini :
INSERT INTO `kota` (`id`, `nama_kota`) VALUES
(1, 'Banda Aceh'),(2, 'Meda'),(3, 'Padang'),(4, 'Jambi'),(5, 'Bengkulu'),(6, 'Bandar Lampung'),
(7, 'Batam'),(8, 'Palembang'),(9, 'Riau'),(10, 'Jakarta'),(11, 'Surabaya'),(12, 'Semarang');2. Create file index.php
File index.php ini adalah file utama yang akan menampilkan inputan bagi user. Dalam file ini juga kita memanggil library typehead.js dan autoajax.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Autocomplete</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<div class ="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Autocomplete Nama Kota</div>
<div class="panel-body">
<div class="row">
<div class="col-md-8" style="padding-top:25px">
<input type="text" class="typeahead form-control" required="required" name="inputnama" placeholder="Nama Kota">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('ajaxauto.php', { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);
return process(data);
});
}
});
</script>
</body>
</html>
Ouput dari langkah kedua ini akan menghasilkan interface seperti Gambar.1 diatas. Namun belum dilengkapi fungsi autocomplete. Karena untuk memberikan fungsi autocomplete-nya, kita harus membuat sebuah file lagi (ajaxauto.php).
Jadi file index.php ini, hanya menerima inputan sebuah atau beberapa karakter dari user, kemudian dilempar ke file ajaxauto.php untuk diperiksa apa data tersebut berada didatabase atau tidak.
3. Create file ajaxauto.php
File ini berisikan informasi koneksi ke database terlebih dahulu dengan tujuan untuk membangun koneksi ke mysql. Kemudian data yang dilempar oleh file index.php diperiksa ke dalam dabatase. Data yang ditemukan dijadikan dalam bentuk JSON, kemudian dikirimkan kembali ke file index.php untuk ditampilkan.
<?php
$con=mysqli_connect("localhost","root","","dbkota");
$sql = "SELECT nama_kota FROM kota
WHERE nama_kota LIKE '%".$_GET['query']."%'
LIMIT 10";
$result = mysqli_query($con,$sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[] = $row['nama_kota'];
}
echo json_encode($json);
?>Perhatikan potongan kode diatas pada bagian query :
$sql = "SELECT nama_kota FROM kota
WHERE nama_kota LIKE '%".$_GET['query']."%'
LIMIT 10";Kode query tersebutlah yang akan mencocokkan setiap karakter yang input apa terdapat di dalam database apat tidak. Kode LIKE '%.$_GET['query']."%' akan mencocokkan karakter apakah berada di depan, di belakang, di posisi kedua atau posisi manapun dari sebuah kata.
Misalkan : Jakarta, Jambi, Sumbawa. Jadi ketika diinputkan karakter b, maka hanya ditampilkan pilihan Sumbawa dan Jambi (karena kedua kota tersebut mengandung karakter b), sedangkan Jakarta tidak mengandung karakter b.
Jika kita menginginkan hanya huruf depan saja yang dipilih, maka kita rubah querynya menjadi :
$sql = "SELECT nama_kota FROM kota
WHERE nama_kota LIKE '".$_GET['query']."%'
LIMIT 10"; Ouput untuk hanya dipilih berdasarkan karakter posisi depan saja ditunjukkan oleh Gambar.2 dibawah ini :
