Autocomplete Search dengan PHP, MySQLi, Ajax dan jQuery

by · July 31, 2015

Hai All ketemu lagi bersama saya portgastea pria tampan asli sunda..hehe… tutorial kali ini kita akan Membuat Autocomplete Search dengan PHP, MySQLi, Ajax and jQuery.

Ok langsung aja… pertama kita buat file koneksi.php seperti dibawah ini

<?php
    define('_HOST_NAME', 'localhost');
    define('_DATABASE_USER_NAME', 'root');
    define('_DATABASE_PASSWORD', '12345');
    define('_DATABASE_NAME', 'tutorial');
 
    $dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME);
    if ($dbConnection->connect_error) {
        trigger_error('Connection Failed: '  . $dbConnection->connect_error, E_USER_ERROR);
    }
?>

Selanjutnya kita buat file index.php seperti dibawah ini

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Autocomplete Search dengan PHP, MySQLi, Ajax and jQuery </title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="description" content="">
  8.     <meta name="author" content="">
  9.  
  10.     <!-- Le styles -->
  11. 	    <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen">
  12.         <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
  13.  
  14. 	<style type="text/css">
  15. 	body {
  16.         padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
  17.       }
  18.  .web{
  19.  font-family:tahoma;
  20.  size:12px;
  21.  top:10%;
  22.  border:1px solid #CDCDCD;
  23.  border-radius:10px;
  24.  padding:10px;
  25.  width:38%;
  26.  margin:auto;
  27.  }
  28.  #search_keyword_id
  29.  {
  30.  width:300px;
  31.  border:solid 1px #CDCDCD;
  32.  padding:10px;
  33.  font-size:14px;
  34.  }
  35.  #result
  36.  {
  37.  position:absolute;
  38.  width:320px;
  39.  display:none;
  40.  margin-top:-1px;
  41.  border-top:0px;
  42.  overflow:hidden;
  43.  border:1px #CDCDCD solid;
  44.  background-color: white;
  45.  }
  46.  .show
  47.  {
  48.  font-family:tahoma;
  49.  padding:10px; 
  50.  border-bottom:1px #CDCDCD dashed;
  51.  font-size:15px; 
  52.  }
  53.  .show:hover
  54.  {
  55.  background:#364956;
  56.  color:#FFF;
  57.  cursor:pointer;
  58.  }
  59. </style>
  60.     <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
  61.  
  62.     <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  63.     <!--[if lt IE 9]>
  64.       <script src="../assets/js/html5shiv.js"></script>
  65.     <![endif]-->
  66.  
  67.     <!-- Fav and touch icons -->
  68.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
  69.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
  70.       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
  71.                     <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
  72.                                    <link rel="shortcut icon" href="assets/ico/favicon.png">
  73.   </head>
  74.  
  75.   <body>
  76.  <div class="navbar navbar-inverse navbar-fixed-top">
  77.       <div class="navbar-inner">
  78.         <div class="container">
  79.           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  80.             <span class="icon-bar"></span>
  81.             <span class="icon-bar"></span>
  82.             <span class="icon-bar"></span>
  83.           </button>
  84.           <a class="brand" href="http://andeznet.com">AndezNet</a>
  85.           <div class="nav-collapse collapse">
  86.             <ul class="nav">
  87.               <li><a href="active">Home</a></li>
  88.  
  89.             </ul>
  90.           </div><!--/.nav-collapse -->
  91.         </div>
  92.       </div>
  93.     </div>
  94.  
  95.  
  96. 	<div class="container">
  97. 	<div class='web'>
  98.         <input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." />
  99.         <div id="result"></div>
  100.     </div>
  101.  
  102. 	<div class="row-fluid">
  103. 			<div class="span12">
  104. 			  <div class="row-fluid">
  105. 				<div class="alert alert-info">
  106. 					<a name="contact"></a>
  107. 				  <h2>www.andeznet.com</h2>
  108. 				  <p class="text-info">Gudang Teknologi & Informasi</p>
  109. 				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
  110. 				</div><!--/span-->
  111. 			  </div><!--/row-->
  112. 			</div><!--/span-->
  113. 	</div><!--/row-->
  114.  
  115. 	</div>
  116.     <script src="assets/js/jquery-1.8.3.min.js"></script>
  117. 	<script type="text/javascript">
  118. $(function(){
  119. $(".cari_keyword").keyup(function() 
  120. { 
  121.     var cari_keyword_value = $(this).val();
  122.     var dataString = 'cari_keyword='+ cari_keyword_value;
  123.     if(cari_keyword_value!='')
  124.     {
  125.         $.ajax({
  126.             type: "POST",
  127.             url: "cari.php",
  128.             data: dataString,
  129.             cache: false,
  130.             success: function(html)
  131.                 {
  132.                     $("#result").html(html).show();
  133.                 }
  134.         });
  135.     }
  136.     return false;    
  137. });
  138.  
  139. $("#result").live("click",function(e){
  140.     var $clicked = $(e.target);
  141.     var $name = $clicked.find('.nama_siswa').html(); 
  142.     var decoded = $("<div/>").html($name).text();
  143.     $('#cari_keyword_id').val(decoded);
  144. });
  145.  
  146. $(document).live("click", function(e) { 
  147.     var $clicked = $(e.target);
  148.     if (! $clicked.hasClass("cari_keyword")){
  149.         $("#result").fadeOut(); 
  150.     }
  151. });
  152.  
  153. $('#cari_keyword_id').click(function(){
  154.     $("#result").fadeIn();
  155. });
  156. });
  157. </script>
  158.  
  159.  
  160. 	<script src="assets/js/bootstrap.min.js"></script>
  161.  
  162.   </body>
  163. </html>

Nah Terakhir kita buat deh file cari.php dan masukan script dibawah ini

<?php
    include('koneksi.php');
    if(isset($_POST['cari_keyword']))
    {
        $cari_keyword = $dbConnection->real_escape_string($_POST['cari_keyword']);
        $sqlSiswa="SELECT id_daftar,s_nama FROM master WHERE s_nama LIKE '%$cari_keyword%'";
        $resSiswa=$dbConnection->query($sqlSiswa);
 
        if($resSiswa === false) {
            trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR);
        }else{
            $rows_returned = $resSiswa->num_rows;
        }
 
 $bold_cari_keyword = '<strong>'.$cari_keyword.'</strong>';
 if($rows_returned > 0){
            while($rowSiswa = $resSiswa->fetch_assoc()) 
            { 
                echo '<div class="show" align="left"><span class="nama_siswa">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>'; 
            }
        }else{
            echo '<div class="show" align="left">No matching records.</div>'; 
        }
    } 
?>

Mudah bukan?? hehe jika sudah berhasil maka akan tampil seperti gambar dibawah ini

autocomplete

Sekian Tutorial kali ini semoga bermanfaat untuk download sourcecode lengkap nya bisa download disini

Terima kasih HAPPY CODING & PROGRAMING



Tags:

You may also like...

2 Responses

  1. zuki says:
    October 2, 2015 at 9:41 pm

    terima kasih gan saya sudah download semua nya, semoga berkah ya gan untuk belajar terimakasih

    Reply

Leave a Reply

Your email address will not be published.