Terkadang pada bagian proses pencarian, begitu kita ketikkan sebuah karakter atau lebih akan muncul beberapa suggestion (saran) dari apa yang kita cari, padahal kita belum selesai melakukan pengetikan. Inilah yang disebut dengan autocomplete.
Hasil akhir atau output yang akan kita selesaikan dalam tutorial autocomplete search, ditunjukkan oleh Gambar.1 dibawah ini :
Langkah-langak membuat bootstrap autocomplete search
1. Create databaseBerinama database dengan nama
dbnegara seperti script sql dibawah ini :CREATE TABLE IF NOT EXISTS `negara` (
`id` int(4) NOT NULL AUTO_INCREMENT,
`nama_negara` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=31 ;Kemudian isi data-data ke tabel negara seperti script sql dibawah ini :
INSERT INTO `negara` (`id`, `nama_negara`) VALUES
(1, 'Afganistan'),(2, 'Arab Saudi'),(3, 'Azerbaijan'),
(4, 'Bahrain'),(5, 'Bangladesh'),(6, 'Bhutan'),
(7, 'Brunei Darussalam'),(8, 'Filipina'),(9, 'Finlandia'),
(10, 'Indonesia'),(11, 'India'),(12, 'Iran'),
(13, 'Haiti'),(14, 'Honduras'),(15, 'Jamaika'),
(16, 'Jepang'),(17, 'Jerman'),(18, 'Kamboja'),
(19, 'Kamerun'),(20, 'Libia'),(21, 'Lebanon'),
(22, 'Malasyia'),(23, 'Mesir'),(24, 'Nigeria'),
(25, 'Norwegia'),(26, 'Pakistan'),(27, 'Panama'),
(28, 'Perancis'),(29, 'Rusia'),(30, 'Rumania');2. Create file index.php
File ini adalah file yang menampilkan interface untuk autocomplete search. Dalam file ini, inputan yang diketikkan dalam form input ditampung dan dioper ke jquery typehead :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Autocomplete</title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/informatika.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">
Dunia Informatika</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="">Bootstrap</a></li>
<li class="clr3"><a href="">PHP</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 Negara</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 Negara">
</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>
Seperti yang terlihat pada kode program diatas, dimana terdapat pemanggilan file autoajax.php. Dimana nantinya hasil inputan (input yang diketikkan user) akan diproses di file autoajax.php.
3. Create file autoajax.php
Seperti yang dijelaskan diatas, file ini berfungsi untuk meneruskan hasil inputan yang diketikkan oleh user untuk dicek ke sisi database, apakah ada karakter yang terdapat pada salah satu nama negara yang terdapat di dalam database.
<?php
$con=mysqli_connect("localhost","root","","dbnegara");
$sql = "SELECT nama_negara FROM negara
WHERE nama_negara LIKE '%".$_GET['query']."%'
LIMIT 10";
$result = mysqli_query($con,$sql);
$json = [];
while($row = $result->fetch_assoc()){
$json[] = $row['nama_negara'];
}
echo json_encode($json);
?>Perhatikan potongan kode dari file autoajax.php diatas :
$sql = "SELECT nama_negara FROM negara
WHERE nama_negara LIKE '%".$_GET['query']."%'
LIMIT 10"; Query diatas yang akan memeriksa apakah setiap karakter yang diinput terdapat apa tidak di dalam negara pada bagian field
nama_negara. Untuk bagian kode query LIKE '%.$_GET['query']."%';akan memeriksa apakah karakter berada di bagian depan, di belakang, di posisi kedua atau posisi manapun dari sebuah kata.Untuk mengfilter hanya huruf depan saja yang dipilih, maka kita rubah querynya menjadi :
$sql = "SELECT nama_negara FROM negara
WHERE nama_negara LIKE '".$_GET['query']."%'
LIMIT 10";