Autocomplete dengan typeahead.js dan bootstrap

Prolog:

Rasanya sudah lama sekali tidak menulis di blog ini, entah karena sibuk beneran atau sibuk yang dibuat-buat. Akhirnya nemu juga bahan buat ditulis lagi dan waktu untuk menulis

Autocomplete adalah salah satu fitur yang sering dipakai ketika kita membuat sebuah aplikasi berbasis web. Dibandingkan dengan menggunakan select / dropdown biasa untuk memilih item, menggunakan autocomplete adalah pilihan yang tepat menurut saya, dikarenakan apabila menggunakan dropdown dan daftarnya sudah sangat panjang, akan sedikit menyulitkan untuk memilih item dari dropdown tersebut.

Sebelumnya saya sudah pernah menulis tentang autocomplete menggunakan jquery-ui dan ternyata sudah 5 tahun berlalu dari tulisan tersebut. Karena sekarang tren yang sedang berkembang dikalangan front-end web developer adalah menggunakan bootstrap, kita akan coba terapkan itu dalam fitur autoomplee ini. Dan twitter, selain mengembangkan bootstrap juga membuat sebuah library untuk fitur autocomplete ini, dengan nama typeahead.js

Untuk menerapkan bootstrap dan typeahead.js ini, silahkan unduh terlebih dahulu kedua library tersebut, dan terapkan pada halaman html anda, jangan lupa memasang Jquery, karena kita juga butuh jquery untuk fitur ini, Anda dapat menggunakan bower, npm atau cara manual download, terserah kebutuhan masing-masing. Hasil halaman htmlnya, kurang lebih seperti berikut :

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Autocomplete menggunakan Typeahead dan Bootstrap</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" >
	</head>
	<body>


<h1 class="text-center">Hello World</h1>




<div class="col-sm-4">
		  <input class="typeahead form-control" type="text" placeholder="Search">
		</div>


		<!-- javascript -->
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="bower_components/typeahead.js/dist/typeahead.bundle.js"></script>
		<script src="bower_components/typeahead.js/dist/bloodhound.min.js"></script>

	</body>
</html>

Dalam artikel kali ini, saya akan langsung mencontohkan membuat autocomplete dengan data yang diambil dari tabel pada MySQL. Sehingga Anda mungkin perlu membuat sebuah table yang sesuai dengan tulisan ini, atau kalo mau gampang, silahkan unduh sql ini datawilayah.sql. Saya akan menggunakan salah satu tabel dalam database tersebut yaitu tabel provinsi.

Seperti yang kita lihat, dalam halaman html tersebut hasilnya adalah sebuah input text field biasa, nah pada textfield tersebut akan kita berikan fungsi untuk autocomplete. Letakkan code berikut dalam bagian bawah script javascript pada halaman tersebut (setelah bllodhound.min.js)

<script>
 			var provinsi = new Bloodhound({
			  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('nama_prov'),
			  queryTokenizer: Bloodhound.tokenizers.whitespace,
			  remote: {
			    url: 'get_provinsi.php?q=%QUERY',
			    wildcard: '%QUERY'
			  }
			});
 			provinsi.initialize();
			$('.typeahead').typeahead({
                    hint: false,
               }, {
			  name: 'propinsi',
			  display:'nama_prov',
			  source: provinsi.ttAdapter(),
			   limit: 10
			});
 		</script>

Script javascript tersebut adalah fungsi autocomplete dengan typeahead.js menggunakan bloodhound.js. Apa itu bloodhound? dalam situsnya, bloodhound adalah suggestion engine yang memiliki kemampuan lebih untuk keperluan autocomplete ini, misalnya untuk ‘prefetch’ dan sebagainya.

Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.

Kita lihat, pada bagian script terdapat ” url: ‘get_provinsi.php?q=%QUERY’,” sehingga kita perlu membuat halaman tersebut yang isinya adalah query dari table provinsi. Isi script get_provinsi adalah sebagai berikut

<?php $mysqli = mysqli_connect("127.0.0.1", "root", "", "datawilayah"); //sesuaikan dengan database anda if (!$mysqli) { echo "Error: Unable to connect to MySQL." . PHP_EOL; echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL; echo "Debugging error: " . mysqli_connect_error() . PHP_EOL; exit; } if (isset($_GET['q'])) { $query = "SELECT nama_prov FROM provinsi WHERE nama_prov LIKE '$_GET[q]%'"; $result=array(); if ($r = $mysqli->query($query)) {
		if ($r->num_rows > 0) {
		// output data of each row
			while($row = $r->fetch_assoc()) {
				$result[] = $row;
			}
		}
	    echo json_encode($result);
	    $r->close();
	}
}


mysqli_close($mysqli);
?>

Script sederhana dan dasar untuk mencari data dengan sebuah kata kunci. Ingat ya, ini sudah 2016, masa masih pake mysql_, minimal pake mysqli_ lah seperti contoh tersebut

Sekarang kita check hasilnya, bagaimana? ada yang sudah berhasil?

Edit: Ternyata ada bugs pada typeahead.js dimana terkadang jumlah suggestion yang keluar tidak sama dengan yang diharapkan. Silahkan baca halaman ini https://github.com/twitter/typeahead.js/issues/1218 untuk solusinya, semoga bermanfaat..