Tutorial Bootstrap

Auto Complete Untuk Pencarian Nama Menggunakan AJAX PHP Bootstrap

Auto Complete Untuk Pencarian Menggunakan AJAX PHP Bootstrap

Tutorial Auto Complete Untuk Pencarian Menggunakan AJAX PHP Bootstrap ini akan membahas bagaimana menampilkan data pada kolom pencarian saat anda mengetikan huruf tertentu dan akan muncul beberapa opsi untuk anda pilih. Setelah anda pilih maka data akan otomatis muncul pada record di tabel siswa. Develindo.com

ikuti langkah berikut ini.

Buat database dengan nama praktek dan tabel dengan nama tb_siswa, Tampilan di form phpmyadmin seperti ini

 

Buat file koneksi.php

koneksi.php

<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');

//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="praktek";
mysql_connect($server,$user,$pass)
 or die('Koneksi Ke database Error'); //mengkoneksikan dengan server 
jika tidak akan muncul pesan error
mysql_select_db($database) or 
die('Database Tidak Ditemukan');   //mengkoneksikan dengan database jika
 tidak akan muncul pesan database tidak ada
?>


index.php

<!DOCTYPE html>
 <html>
      <head>
           <title>Develindo | Auto Complete Untuk Pencarian Menggunakan AJAX PHP Bootstrap</title>
           <!-- Bootstrap core CSS -->
           <link href="css/bootstrap.css" rel="stylesheet">
           <!-- Bootstrap core JavaScript-->
           <script src="js/jquery.min.js"></script>
           <script src="js/bootstrap.js"></script>
           <script src="js/typeahead.js"></script>

      </head>
      <body>
           <br /><br />
           <div class="container" style="width:800px;">
                <h2 align="center">Auto Complete Untuk Pencarian Menggunakan AJAX PHP Bootstrap</h2>
                <h3 align="center">Data Seluruh Siswa</h3>
                <br /><br />
                <form class="form-inline" role="form">
                <div class="form-group">
                <div class="input-group">
               
 <input type="text" name="txtCountry" id="txtCountry" 
class="form-control input-sm mb-10 typeahead" placeholder="Cari Data..."
 autocomplete="off">
                <span 
class="input-group-addon" title="" data-original-title="" 
data-trigger="hover" data-container="body" data-toggle="popover" 
data-placement="bottom" data-content="Cari Berita Berdasarkan 
Judul">Cari</span>
                </div>
                </div>
                </form>
                <br>
                <div id="tabel_siswa">
                <div class="table-responsive">
                     <table class="table table-bordered">
                          <tr>
                               <th>NIS</th>
                               <th>NISN</th>
                               <th>Nama Lengkap</th>
                               <th>Gender</th>
                          </tr>
                          <?php
                          //panggil fungsi koneksi.php
                          include "koneksi.php";
                          //ambil data dari tb_siswa dan lakukan perulangan dengan while
                          $ambildata=mysql_query("select*from tb_siswa order by id_siswa");
                          while($a = mysql_fetch_array($ambildata))
                          {
                          ?>
                          <tr>
                               <td><strong><?php echo $a['id_siswa']; ?></strong></td>
                               <td><?php echo $a['nisn'];?></td>
                               <td><?php echo $a['nama_siswa'];?></td>
                               <td><?php echo $a['gender_siswa'];?></td>
                          </tr>
                          <?php
                          }
                          ?>
                     </table>
                </div>
                </div>
           </div>
      </body>
 </html>
<script>
$(document).ready(function () {
  $('#txtCountry').typeahead({
    source: function (query, result) {
      $.ajax({
        url: "search.php",
        data: 'query=' + query,
        dataType: "json",
        type: "POST",
        success: function (data) {
          result($.map(data, function (item) {
            return item;
          }));
        }
      });
    }
  });

});

/*Pencarian*/
$(document).ready(function(){

  $(document).on('change', '#txtCountry', function(){
   var se = this.value;
   $.ajax({
    url:"result.php",
    method:"POST",
    data:{se:se},
    success:function(data){
     $('#tabel_siswa').html(data);

   }
 })
 });

});
</script>

 
search.php
 

<?php
include "koneksi.php";

    $keyword = strval($_POST['query']);
    $search_param = "{$keyword}%";
    $sql = mysql_query("SELECT * FROM tb_siswa WHERE nama_siswa LIKE '%$search_param%'");
    $result = mysql_num_rows($sql);
    if ($result > 0) {
        while($row = mysql_fetch_array($sql)) {
        $countryResult[] = $row["nama_siswa"];
        }
        echo json_encode($countryResult);
    }

?>

 

result.php
 

<?php
error_reporting(0);
include "koneksi.php";
$page = '';
$output = '';
$se=$_POST['se'];
$query = "SELECT * FROM tb_siswa where nama_siswa LIKE '%$se%' order by id_siswa asc";
$result = mysql_query($query);
$jumlah=mysql_num_rows($result);
if($jumlah < 1){
$output .='<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <th>NIS</th>
            <th>NISN</th>
            <th>Nama Lengkap</th>
            <th>Gender</th>
        </tr>
       
 <tr><td colspan="4">Tidak Ditemukan Data Yang Sesuai Dengan
 Kata Kunci Yang Anda Masukan</td></tr>
    </table>
</div>';

}else{
$output .='<div class="table-responsive">
    <table class="table table-bordered">
        <tr>
            <th>NIS</th>
            <th>NISN</th>
            <th>Nama Lengkap</th>
            <th>Gender</th>
        </tr>';
        while($row = mysql_fetch_array($result))
        {
        $output .= '
        <tr>
            <td><strong>' . $row["id_siswa"] . '</strong></td>
            <td>' . $row["nisn"] . '</td>
            <td>' . $row["nama_siswa"] . '</td>
            <td>' . $row["gender_siswa"] . '</td>

        </tr>
        ';
        }
        $output .= '
    </table>
</div>';

}
echo $output;
?>


result.php akan menampilkan hasil pencarian yang anda pilih tanpa me refresh halaman.

Anda dapat melihat demo aplikasi dan anda juga dapat mendownload source code ini gratis. Terimakasih

 

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website