Tunggu Sebentar ...
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.
isset($_GET['cari']) ? $_GET['cari']:'';
script diatas yang string 'cari' itu dapatnya dari mana ya? apakah udah disediain di kolom tabel?
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 ?
oh iya.. bener..
1 lagi mas,
$(function(){
$('#nama').typeahead([
{
name: 'nama', <----- ( ini mengarah kemana? tag input, tag label atau database?? )
remote: action + '?cari=%QUERY'
}
]);
});
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/
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.
udah coba kayk di tulisan itu ?
contohnya kyk disini http://contoh.dannimoring.net/autocomplete-bootstrap/
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...
iya klo itu memang biasanya krn kita pernah search keyword itu di PC yang sama pula, jadinya dia kedetek nama kita..
Balas
Cieeee... Mbah Google cukup akrab sm Mas Danni rupanya. Foto pertama itu bukan hasil potosop kan?
hahahaha ga potosop dong...ga tau knp kok lg iseng nulis nama malah kedetek nama sendiri..hehe
Balas
oo gitu ya, kak. baru tau. di blog bisa juga ya? seringnya sih liatnya di twitter, fb, email sama google
seharusnya bisa ila..hehehe itu kan pake bahasa pemrograman web..tergantung blog nya aja..
Balas