Dalam pertemuan ini saya ingin membagikan tutorial tentang Cara Membuat Auto Suggest Menggunakan jQuery Ajax Pada PHP. Auto suggest ini seperti memberikan referensi keyword yang akan dicari atau yang diketikkan pada form input pencarian. Jadi saat kita mengetikkan beberapa huruf atau kata, maka dibawah form inputan akan muncul data atau kata referensi bantuan. Dimana data atau pencarian yang cocok dengan pilihan kita

Dalam sebuah sistem tentu sangat penting terdapat fitur seperti ini, agar lebih membantu user dalam menggunakannya. Sebelum memulainya persiapkan terlebih dahulu sebuah table dari database yang ingin kita cari seperti berikut:

cara-membuat-auto-suggest-menggunakan-jquery-ajax-pada-php-edi-190220

Kemudian lakukan insert data ke dalam table authors dan saya disini menggunakan data dummy.

INSERT INTO `authors` VALUES ('1','Elmira','Yundt','do\'keefe@example.com','2010-08-03','2002-01-10 09:04:38'),
('2','Christophe','Reilly','akutch@example.net','1981-07-29','1998-04-07 13:28:35'),
('3','Jaron','Frami','stanton.frank@example.com','1987-06-18','1994-01-11 09:12:40'),
('4','Chet','Rolfson','tyshawn.powlowski@example.com','1983-09-21','2002-11-30 21:08:46'),
('5','Hannah','Mueller','reichert.adella@example.com','1990-12-10','1991-10-11 18:26:57'),
('6','Shanelle','Homenick','brenna.oberbrunner@example.com','1986-08-27','1985-10-07 09:02:23'),
('7','Nya','Stokes','jdeckow@example.com','1987-07-11','1981-09-23 09:25:26'),
('8','Deondre','Stoltenberg','van.heidenreich@example.net','1977-12-19','2010-12-31 21:26:58'),
('9','Deanna','Weissnat','camila.hegmann@example.com','2017-07-09','2005-01-20 19:17:17'),
('10','Justine','Connelly','fisher.marietta@example.net','1986-04-26','2004-11-10 23:54:40'),
('11','Leola','Walker','solon70@example.com','1998-01-21','1987-05-06 19:29:59'),
('12','Raina','Witting','emueller@example.org','1983-12-10','2018-01-09 00:18:10'),
('13','Rey','Yost','ejakubowski@example.org','1986-04-25','1989-01-23 01:29:59'),
('14','Yadira','Mann','zraynor@example.net','1986-01-31','2014-06-05 20:08:00'),
('15','Mckayla','Kertzmann','sandy.brekke@example.org','2001-10-27','1988-01-26 05:03:13'),
('16','Dora','Dietrich','juliana71@example.org','2012-01-13','2003-07-20 08:38:19'),
('17','Leda','Heaney','agnes81@example.com','2011-03-03','1983-12-26 04:59:55'),
('18','Alice','Bashirian','hulda57@example.org','1987-12-22','1982-03-06 04:03:03'),
('19','Missouri','Morar','pedro.satterfield@example.com','1993-03-11','1993-02-17 04:00:33'),
('20','Bernie','Hyatt','alang@example.com','1982-01-05','1994-08-27 20:19:04'),
('21','Carey','Rippin','emard.jaylen@example.org','1999-03-05','1991-03-28 23:10:00'),
('22','Abdiel','Stamm','patience98@example.org','2014-01-28','1981-12-22 20:30:29'),
('23','Lamar','Auer','virgil25@example.net','2019-01-15','1975-10-19 05:52:22'),
('24','Angie','King','triston.walker@example.net','2006-11-01','1970-05-28 02:01:25'),
('25','Torrance','Wyman','rowan46@example.com','1976-12-01','1982-09-13 12:21:02');

Baiklah selanjutnya buat file baru lalu beri nama,

index.php

cara membuat-auto-suggest-menggunakan-jquery-ajax-pada-php-edi-190220

pada code diatas terdapat library bootstrap serta file plugin jquery jslocalsearch.js, selanjutnya tambahkan strukturnya seperti berikut ini:

<div class="container my-5"> 
   <h3 class="text-center mb-3">Cara Membuat Auto Suggest Menggunakan jQuery Ajax Pada PHP</h3>  
   <div class="row">    
    <div class="col-md-3"></div>
    <div class="col-md-6">
     <input type="text" id="gsearchsimple" class="form-control input-lg" placeholder="Search..." />

     <ul class="list-group">

     </ul>
     <div id="localSearchSimple"></div>
     <div id="detail" style="margin-top:16px;"></div>
    </div>
    <div class="col-md-3"></div>
   </div>
  </div>

Serta step selanjutnya tambahkan script ajax jquery seperi dibawah ini:

<script>
$(document).ready(function(){
 $('#gsearchsimple').keyup(function(){
  var query = $('#gsearchsimple').val();
  $('#detail').html('');
  $('.list-group').css('display', 'block');
  if(query.length == 2)
  {
   $.ajax({
    url:"view-data.php",
    method:"POST",
    data:{query:query},
    success:function(data)
    {
     $('.list-group').html(data);
    }
   })
  }
  if(query.length == 0)
  {
   $('.list-group').css('display', 'none');
  }
 });

 $('#localSearchSimple').jsLocalSearch({
  action:"Show",
  html_search:true,
  mark_text:"marktext"
 });

 $(document).on('click', '.gsearch', function(){
  var email = $(this).text();
  $('#gsearchsimple').val(email);
  $('.list-group').css('display', 'none');
  $.ajax({
   url:"view-data.php",
   method:"POST",
   data:{email:email},
   success:function(data)
   {
    $('#detail').html(data);
   }
  })
 });
});
</script>

Oke jika sudah tinggal membuat file baru untuk proses request data dari table database yang sudah dibuat.

Simpan file baru kemudian beri nama view-data.php, lalu ketikkan code dibawah ini:

<?php

$koneksi = new PDO("mysql:host=localhost; dbname=test", "root", "");

if(isset($_POST['query']))
{
 $sqlquery = "
 SELECT DISTINCT email FROM authors 
 WHERE email LIKE '%".trim($_POST["query"])."%'
 ";

 $statement = $koneksi->prepare($sqlquery);

 $statement->execute();

 $result = $statement->fetchAll();

 $output = '';

 foreach($result as $row)
 {
  $output .= '
  <li class="list-group-item contsearch">
   <a href="javascript:void(0)" class="gsearch" style="color:#333;text-decoration:none;">'.$row["email"].'</a>
  </li>
  ';
 }

 echo $output;
}

if(isset($_POST['email']))
{
 $sqlquery = "
 SELECT * FROM authors 
 WHERE email = '".trim($_POST["email"])."' 
 LIMIT 1
 ";

 $statement = $koneksi->prepare($sqlquery);

 $statement->execute();

 $result = $statement->fetchAll();

 $output = '
 <table class="table table-bordered table-striped">
  <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Email</th>
   <th>Birthday</th>
  </tr>
 ';

 foreach($result as $row)
 {
  $output .= '
  <tr>
   <td>'.$row["first_name"].'</td>
   <td>'.$row["last_name"].'</td>
   <td>'.$row["email"].'</td>
   <td>'.$row["birthdate"].'</td>
  </tr>
  ';
 }
 $output .= '</table>';

 echo $output;
}

?>

Baiklah pada proses pencarian maka akan seperti tampilan dibawah ini :

cara membuat auto-suggest-menggunakan-jquery-ajax-pada-php-edi-190220

Kemudian pilih salah satu maka akan menampilkan seperti ini:

cara membuat auto suggest-menggunakan-jquery-ajax-pada-php-edi-190220

Jadi hasil akhirnya seperti pada tampilan diatas, dan sampai disini pembahasan kita tentang Cara Membuat Auto Suggest Menggunakan jQuery Ajax Pada PHP. Sampai berjumpa dengan tutorial lainnya dan selamat mencoba.