Cara Membuat Autocomplete dengan Ajax dari Database pada PHP

March 8, 2019

Cara Membuat Autocomplete/Auto Suggest dari Database pada PHP – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan memposting tentang cara membuat autocomplete/autosuggest pada textbox menggunakan Ajax yang mengambil datanya dari database MySQL/MariaDB. Seperti saat sobat ingin melakukan pencarian pada google maka akan muncul kata sugesti setiap sobat mengetikkan 1 huruf jadi kurang lebih kita akan membuatnya seperti itu namun kali ini kita hanya menggunakan Ajax.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `provinsi`  (
  `id_prov` char(2) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `nama` tinytext CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  PRIMARY KEY (`id_prov`) USING BTREE
)

CREATE TABLE `provinsi` (

`id_prov` char(2) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`nama` tinytext CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

PRIMARY KEY (`id_prov`) USING BTREE

)

3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah

INSERT INTO `provinsi` VALUES ('11', 'Aceh');
INSERT INTO `provinsi` VALUES ('12', 'Sumatera Utara');
INSERT INTO `provinsi` VALUES ('13', 'Sumatera Barat');
INSERT INTO `provinsi` VALUES ('14', 'Riau');
INSERT INTO `provinsi` VALUES ('15', 'Jambi');
INSERT INTO `provinsi` VALUES ('16', 'Sumatera Selatan');
INSERT INTO `provinsi` VALUES ('17', 'Bengkulu');
INSERT INTO `provinsi` VALUES ('18', 'Lampung');
INSERT INTO `provinsi` VALUES ('19', 'Kepulauan Bangka Belitung');
INSERT INTO `provinsi` VALUES ('21', 'Kepulauan Riau');
INSERT INTO `provinsi` VALUES ('31', 'DKI Jakarta');
INSERT INTO `provinsi` VALUES ('32', 'Jawa Barat');
INSERT INTO `provinsi` VALUES ('33', 'Jawa Tengah');
INSERT INTO `provinsi` VALUES ('34', 'DI Yogyakarta');
INSERT INTO `provinsi` VALUES ('35', 'Jawa Timur');
INSERT INTO `provinsi` VALUES ('36', 'Banten');
INSERT INTO `provinsi` VALUES ('51', 'Bali');
INSERT INTO `provinsi` VALUES ('52', 'Nusa Tenggara Barat');
INSERT INTO `provinsi` VALUES ('53', 'Nusa Tenggara Timur');
INSERT INTO `provinsi` VALUES ('61', 'Kalimantan Barat');
INSERT INTO `provinsi` VALUES ('62', 'Kalimantan Tengah');
INSERT INTO `provinsi` VALUES ('63', 'Kalimantan Selatan');
INSERT INTO `provinsi` VALUES ('64', 'Kalimantan Timur');
INSERT INTO `provinsi` VALUES ('65', 'Kalimantan Utara');
INSERT INTO `provinsi` VALUES ('71', 'Sulawesi Utara');
INSERT INTO `provinsi` VALUES ('72', 'Sulawesi Tengah');
INSERT INTO `provinsi` VALUES ('73', 'Sulawesi Selatan');
INSERT INTO `provinsi` VALUES ('74', 'Sulawesi Tenggara');
INSERT INTO `provinsi` VALUES ('75', 'Gorontalo');
INSERT INTO `provinsi` VALUES ('76', 'Sulawesi Barat');
INSERT INTO `provinsi` VALUES ('81', 'Maluku');
INSERT INTO `provinsi` VALUES ('82', 'Maluku Utara');
INSERT INTO `provinsi` VALUES ('91', 'Papua Barat');
INSERT INTO `provinsi` VALUES ('92', 'Papua');

INSERT INTO `provinsi` VALUES ('11', 'Aceh');

INSERT INTO `provinsi` VALUES ('12', 'Sumatera Utara');

INSERT INTO `provinsi` VALUES ('13', 'Sumatera Barat');

INSERT INTO `provinsi` VALUES ('14', 'Riau');

INSERT INTO `provinsi` VALUES ('15', 'Jambi');

INSERT INTO `provinsi` VALUES ('16', 'Sumatera Selatan');

INSERT INTO `provinsi` VALUES ('17', 'Bengkulu');

INSERT INTO `provinsi` VALUES ('18', 'Lampung');

INSERT INTO `provinsi` VALUES ('19', 'Kepulauan Bangka Belitung');

INSERT INTO `provinsi` VALUES ('21', 'Kepulauan Riau');

INSERT INTO `provinsi` VALUES ('31', 'DKI Jakarta');

INSERT INTO `provinsi` VALUES ('32', 'Jawa Barat');

INSERT INTO `provinsi` VALUES ('33', 'Jawa Tengah');

INSERT INTO `provinsi` VALUES ('34', 'DI Yogyakarta');

INSERT INTO `provinsi` VALUES ('35', 'Jawa Timur');

INSERT INTO `provinsi` VALUES ('36', 'Banten');

INSERT INTO `provinsi` VALUES ('51', 'Bali');

INSERT INTO `provinsi` VALUES ('52', 'Nusa Tenggara Barat');

INSERT INTO `provinsi` VALUES ('53', 'Nusa Tenggara Timur');

INSERT INTO `provinsi` VALUES ('61', 'Kalimantan Barat');

INSERT INTO `provinsi` VALUES ('62', 'Kalimantan Tengah');

INSERT INTO `provinsi` VALUES ('63', 'Kalimantan Selatan');

INSERT INTO `provinsi` VALUES ('64', 'Kalimantan Timur');

INSERT INTO `provinsi` VALUES ('65', 'Kalimantan Utara');

INSERT INTO `provinsi` VALUES ('71', 'Sulawesi Utara');

INSERT INTO `provinsi` VALUES ('72', 'Sulawesi Tengah');

INSERT INTO `provinsi` VALUES ('73', 'Sulawesi Selatan');

INSERT INTO `provinsi` VALUES ('74', 'Sulawesi Tenggara');

INSERT INTO `provinsi` VALUES ('75', 'Gorontalo');

INSERT INTO `provinsi` VALUES ('76', 'Sulawesi Barat');

INSERT INTO `provinsi` VALUES ('81', 'Maluku');

INSERT INTO `provinsi` VALUES ('82', 'Maluku Utara');

INSERT INTO `provinsi` VALUES ('91', 'Papua Barat');

INSERT INTO `provinsi` VALUES ('92', 'Papua');

Cara Membuat Autocomplete

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

2. Buat file index.php dan isikan dengan script dibawah ini

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="dk.png">
    <title>Dewan Autocomplete - www.dewankomputer.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
      ul{
        background-color:#eee;
        cursor:pointer;
        position: absolute;
        width: 95%;
      }
      li{
        padding:12px;
        border:thin solid #F0F8FF;
      }
      li:hover{
        background-color:#7FFFD4;
      }
    </style>
  </head>
  <body class="bg-light">
    <nav class="navbar navbar-dark bg-primary">
      <a class="navbar-brand text-white" href="index.php">
        Dewan Komputer
      </a>
    </nav>

    <div class="container">
      <h3 align="center" class="mt-3 mb-5">Dewan Autocomplete pada Textbox Menggunakan Ajax</h3>
      <div class="row">
        <div class="col-sm-6 offset-sm-3">
          <label>Nama Provinsi</label>  
          <input type="text" name="provinsi" id="provinsi" class="form-control" placeholder="Tulis Nama Provinsi Indonesia" />  
          <div id="provinsiList"></div>
        </div>
      </div>
    </div>

    <div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright:
      <a href="https://dewankomputer.com/"> Dewan Komputer</a>
    </div>
</body>  
 </html>  
 <script>  
 $(document).ready(function(){  
      $('#provinsi').keyup(function(){  
           var query = $(this).val();  
           if(query != '')  
           {  
                $.ajax({  
                     url:"search.php",  
                     method:"POST",  
                     data:{query:query},  
                     success:function(data)  
                     {  
                          $('#provinsiList').fadeIn();  
                          $('#provinsiList').html(data);  
                     }  
                });  
           }  
      });  
      $(document).on('click', 'li', function(){  
           $('#provinsi').val($(this).text());  
           $('#provinsiList').fadeOut();  
      });  
 });  
 </script>

<!DOCTYPE html>

<html>

<head>

<title>Dewan Autocomplete - www.dewankomputer.com</title>

<style>

ul{

background-color:#eee;

cursor:pointer;

position: absolute;

width: 95%;

}

li{

padding:12px;

border:thin solid #F0F8FF;

}

li:hover{

background-color:#7FFFD4;

}

</style>

</head>

Dewan Komputer

</a>

</nav>

<h3 align="center" class="mt-3 mb-5">Dewan Autocomplete pada Textbox Menggunakan Ajax</h3>

<label>Nama Provinsi</label>

</div>

<div class="fixed-bottom text-center mt-5">© <?php echo date('Y'); ?> Copyright:

<a href="https://dewankomputer.com/"> Dewan Komputer</a>

</div>

</body>

</html>

$(document).ready(function(){

$('#provinsi').keyup(function(){

var query = $(this).val();

if(query != '')

{

$.ajax({

url:"search.php",

method:"POST",

data:{query:query},

success:function(data)

{

$('#provinsiList').fadeIn();

$('#provinsiList').html(data);

}

});

}

});

$(document).on('click', 'li', function(){

$('#provinsi').val($(this).text());

$('#provinsiList').fadeOut();

});

</script>

3. Buat file search.php dan isikan dengan kode dibawah

<?php  
  include 'koneksi.php';
  
  if(isset($_POST["query"])){
    $output = '';
    $key = "%".$_POST["query"]."%";
    $query = "SELECT * FROM provinsi WHERE nama LIKE ? LIMIT 10";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param('s', $key);
    $dewan1->execute();
    $res1 = $dewan1->get_result();

    $output = '<ul class="list-unstyled">';
    if($res1->num_rows > 0){
      while ($row = $res1->fetch_assoc()) {
        $output .= '<li>'.$row["nama"].'</li>';  
      }
    } else {
      $output .= '<li>Tidak ada yang cocok.</li>';  
    }  
    $output .= '</ul>';
    echo $output;
  }
?>

<?php

include 'koneksi.php';

if(isset($_POST["query"])){

$output = '';

$key = "%".$_POST["query"]."%";

$query = "SELECT * FROM provinsi WHERE nama LIKE ? LIMIT 10";

$dewan1 = $db1->prepare($query);

$dewan1->bind_param('s', $key);

$dewan1->execute();

$res1 = $dewan1->get_result();

$output = '<ul class="list-unstyled">';

if($res1->num_rows > 0){

while ($row = $res1->fetch_assoc()) {

$output .= '<li>'.$row["nama"].'</li>';

}

} else {

$output .= '<li>Tidak ada yang cocok.</li>';

}

$output .= '</ul>';

echo $output;

}

4. Jalankan project dan akan menghasilkan seperti gambar dibawah

Cara diatas merupakan cara standar jika kita menggunakan ajax. Namun ada cara lagi yaitu membuat menggunakan jquery.ui.js. Dengan menggunakan plugin itu tentu akan lebih mudah dan itu akan saya bahas pada postingan saya selanjutnya. Sekian postingan kali ini tentang Cara Membuat Autocomplete dari Database pada PHP. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Kunjungi postingan saya lainnya untuk menambah wawasan dan ilmu sobat.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

15 thoughts on “Cara Membuat Autocomplete dengan Ajax dari Database pada PHP”

Pingback: Cara Membuat Autocomplete/Suggestion dengan Plugin pada PHP - Dewan Komputer
Pingback: Membuat Autocomplete/Live Search dengan Foto pada PHP - Dewan Komputer
Dewi Ratih Puspita says:

May 10, 2020 at 6:58 pm

halo, bagaimana caranya jika ingin ada 2 field yang mau di buat autocompleted?
Karena saat saya coba, saat mengisi dan click 1 field, field yang satu lagi ikut terisi data yang sama.

Reply
1. dewan says:
  
  May 11, 2020 at 2:54 pm
  
  di bagian id diganti contoh yg id=”provinsi” dan id=”provinsiList”
  di autocompleted yg ke2 bikinnya
  id=”provinsi2″ dan id=”provinsiList2″
  begitu jg dengan javascriptnya dan file action untuk mengambil datanya harus terpisah
  
  Reply
Dewi Ratih Puspita says:

May 11, 2020 at 3:12 pm

alhamdulillah sdh ketemu gan, jadi coding “document” saya ganti menjadi ‘#privinsi’ sesuai dengan field2nya.

Reply
rijal says:

August 22, 2020 at 2:57 pm

bisa bikinin script sederhana aja gan, soalnya saya coba ko ga jadi ya gan
tolong dong ga

Reply
1. dewan says:
  
  August 24, 2020 at 3:39 am
  
  script apa
  
  Reply
  1. rijal says:
    
    August 24, 2020 at 4:59 am
    
    script auto complete
    di mana
    ada input nama barang misalnya
    dia kluar auto complete yg isinya
    nama barang dan harga
    ketika auto complete di pencet
    nanti menyesuaikan
    nama barang ke input nama barang
    dan harga ke input harga barang
    
    saya coba gagal trus gan
    mohon kasih solusinya gan
    terimakasih
    
    Reply
    1. dewan says:
      
      August 26, 2020 at 3:32 pm
      
      memang yg dibikin seperti apa
      
      Reply
      1. rijal says:
        
        August 26, 2020 at 5:29 pm
        
        ada contact person nya bang?
      2. dewan says:
        
        August 28, 2020 at 10:35 am
        
        bisa lewat sini mas
        https://dewankomputer.com/kontak/
rijal says:

August 28, 2020 at 6:08 pm

cek email segera ya bang ,

Reply
1. dewan says:
  
  August 28, 2020 at 12:18 pm
  
  ngga ada yg masuk mas
  
  Reply
roi says:

August 5, 2021 at 8:35 am

Saya juga ingin membuat 2 field autocomplete. Saya sudah coba membuat id dan div id nya berbeda dan sudah menyesuaikannya dengan action scriptnya tetapi field yang satunya tetap terisi sama mas. Mohon bantuannya. Terima kasih.

Reply
avina says:

January 3, 2022 at 9:54 pm

terus cara nampilin hasil pencariannya gimana om ? misal ditampilkan di popup / di newtab

Reply