Autocomplete Bootstrap Sederhana Dengan PHP
Autocomplete Bootstrap dengan PHP. Iseng-iseng ingin mencatat ini, mumpung lagi inget, takutnya kelupaan dan suatu saat butuh lagi. Jadi saya catat saja disini. Pernah lihat pencarian di google kan? ketika ketik sebagian huruf saja lalu ada suges yang muncul tepat dibawah text pencariannya.
Nah kayak contoh gambar diatas, ketika ketik "dann" maka yang berhubungan dengan dann di suges kan. Catatan ini membuat autocomplete sederhana dengan bootstrap 3.0.2 sebagai framework CSS nya, PHP sebagai bahasa pemrogramannya, MySQL sebagai database nya.
Yang dibutuhkan selain webserver yang mundukung PHP dan MySQL
1. Bootstrap
2. Typeahead.js
File-file yang akan dibuat
1. index.php
2. css.css
3. caridata.php
#Index.php
<!—
/******************************************************************
autocompelte dengan typeahead bootstrap 3.0.2 dan pemrograman PHP
Danni Moring
pemrograman : PHP
database : MySQL
CSS : Bootstrap 3.0.2
JS : Typeahead.js
******************************************************************/
—>
<!DOCTYPE html>
<html>
<head>
<title>Typeahead Js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstrap-3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css.css">
<!—[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]—>
</head>
<body>
<div class="container">
<div class="row">
<form action="caridata.php" id="frmdata"> <!— form nya —>
<div class="col-sm-4">
<label for="nama">Cari Nama Orang</label>
<input type="text" class="form-control typeahead" id="nama" data-provide="typeahead" autocomplete="off">
</div>
</form> <!— @end form nya —>
</div>
</div>
<!— script nya —>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.0.2/js/typeahead.min.js"></script>
<script>
var action = $('#frmdata').attr('action');
$(function(){
$('#nama').typeahead([
{
name: 'nama',
remote: action + '?cari=%QUERY'
}
]);
});
</script>
</body>
</html>
#css.css
/*
diambil dari https://github.com/jharding/typeahead.js-bootstrap.css
*/
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
width:100%;
height:30px;
position:absolute;
top:0;
left:0;
}
.twitter-typeahead .tt-hint {
color:#fff;
}
.tt-dropdown-menu {
min-width: 200px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
}
.tt-suggestion {
display: block;
padding: 5px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
#caridata.php
<?php
/***************************************
autocompelte dengan typeahead bootstrap 3.0.2 dan pemrograman PHP
Danni Moring
pemrograman : PHP
database : MySQL
CSS : Bootstrap 3.0.2
JS : Typeahead.js
****************************************/
$server = "localhost";
$user = "root";
$pass = "";
$db = "test";
$database = new mysqli($server, $user, $pass, $db);
$cari = isset($_GET['cari']) ? $_GET['cari']:'';
$strsql = "SELECT * from dataorang where nama like '".$cari."%'";
$data = array();
if ( $res = $database->query($strsql) ) {
while ($row = $res->fetch_assoc()) {
$data[] =$row['nama'];
}
echo (json_encode($data));
}
/* tutup koneksinya */
$database->close();
?>
Hasilnya seperti gambar dibawah ini, atau bisa lihat langsung versi demo nya disini
Kurang lebihnya begitulah catatan saya ini. Hanya sekedar mencatat, siapa tahu juga ada yang bisa bermanfaat.
Facebook 
Twitter
Google PlusKomentar untuk "Autocomplete Bootstrap Sederhana Dengan PHP"
Abbas
isset($_GET['cari']) ? $_GET['cari']:'';
script diatas yang string 'cari' itu dapatnya dari mana ya? apakah udah disediain di kolom tabel?
Danni Moring
perhatikan pada file index.php ada code seperti ini
$(function(){
$('#nama').typeahead([
{
name: 'nama',
remote: action + '?cari=%QUERY'
}
]);
});
remote: action + '?cari=%QUERY' <<------- perhatikan, ada "cari" kan ?
Abbas
oh iya.. bener..
1 lagi mas,
$(function(){
$('#nama').typeahead([
{
name: 'nama', <----- ( ini mengarah kemana? tag input, tag label atau database?? )
remote: action + '?cari=%QUERY'
}
]);
});
Danni Moring
sorry komen tadi salah jadi saya hapus, maksud saya name : 'nama' itu maksudnya nama dataset nya, bisa lihat contohnya disini http://twitter.github.io/typeahead.js/examples/
iwey
Om ni ko g muncul autocompleteny ia? kayany g bisa tersambung dengan JSnya. klo di enter databasenya ada. gmn solusinnya gan? tq sbslumnnya, ilmu ni bermanfaat bagi saya. 
Danni Moring
udah coba kayk di tulisan itu ?
contohnya kyk disini http://contoh.dannimoring.net/autocomplete-bootstrap/
Fauzi
Gambar itu maknanya Bang Dann pernah searching nama sendiri di Google, dan waktu search, Bang Dann sedang dalam keadaan log in di Google Account.
Wah, gak tahu aku buat beginian... Tapi keren, ya...
Danni Moring
iya klo itu memang biasanya krn kita pernah search keyword itu di PC yang sama pula, jadinya dia kedetek nama kita..
Balas@hijriyan
Cieeee... Mbah Google cukup akrab sm Mas Danni rupanya. Foto pertama itu bukan hasil potosop kan?
Danni Moring
hahahaha ga potosop dong...ga tau knp kok lg iseng nulis nama malah kedetek nama sendiri..hehe
BalasIla
oo gitu ya, kak. baru tau. di blog bisa juga ya? seringnya sih liatnya di twitter, fb, email sama google
Danni Moring
seharusnya bisa ila..hehehe itu kan pake bahasa pemrograman web..tergantung blog nya aja..
Balas