Tunggu Sebentar ...

Autocomplete Bootstrap Sederhana Dengan PHP

Ditulis oleh

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.

 

Ditumpuk didalam berkas : Catatan Belajar , PHP , MySQL / Mysqli , Bootstrap
Yang berkomentar (12)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Autocomplete Bootstrap Sederhana Dengan PHP"

Abbas
12-02-2016 17:25

isset($_GET['cari']) ? $_GET['cari']:'';

script diatas yang string 'cari' itu dapatnya dari mana ya? apakah udah disediain di kolom tabel?

Komentar via web

Balas
Danni Moring
12-02-2016 17:58

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 ?

Komentar via web

Balas
Abbas
12-02-2016 18:10

oh iya.. bener..
1 lagi mas,

$(function(){
$('#nama').typeahead([
{
name: 'nama', <----- ( ini mengarah kemana? tag input, tag label atau database?? )
remote: action + '?cari=%QUERY'
}
]);
});

Komentar via web

Balas
Danni Moring
12-02-2016 19:07

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/

Komentar via web

Balas
iwey
24-06-2014 22:01

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.

Komentar via web

Balas
Danni Moring
24-06-2014 23:16

udah coba kayk di tulisan itu ?

contohnya kyk disini http://contoh.dannimoring.net/autocomplete-bootstrap/

Komentar via web

Balas
Fauzi
10-12-2013 14:52

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...

Balas
Danni Moring
10-12-2013 15:07

iya klo itu memang biasanya krn kita pernah search keyword itu di PC yang sama pula, jadinya dia kedetek nama kita..

Balas
@hijriyan
09-12-2013 23:42

Cieeee... Mbah Google cukup akrab sm Mas Danni rupanya. Foto pertama itu bukan hasil potosop kan?

Balas
Danni Moring
10-12-2013 10:16

hahahaha ga potosop dong...ga tau knp kok lg iseng nulis nama malah kedetek nama sendiri..hehe

Balas
Ila
09-12-2013 23:16

oo gitu ya, kak. baru tau. di blog bisa juga ya? seringnya sih liatnya di twitter, fb, email sama google

Balas
Danni Moring
09-12-2013 23:22

seharusnya bisa ila..hehehe itu kan pake bahasa pemrograman web..tergantung blog nya aja..

Balas