Autocomplete Image dan Custom HTML Menggunakan jQuery PHP

12/12/2019    Shelli Ripati    401     Website

Hallo treman-teman Dumet School, pada kesempatan kali ini saya akan membuat Autocomplete Image dan Custom HTML Menggunakan Jquery PHP. Sebelumnya kita sudah membuat autocomplete textbox yang sederhana. Dan kali ini saya akn menampilkan gmabar dan melakukan custom html agar tampilan list suggesstionnya menarik.

Langkah pertama untuk membuat Autocomplete Image dan Custom HTML Menggunakan Jquery PHP yaitu teman-teman buat terlebih dahulu struktur html seperti di bawah ini.


<!DOCTYPE html>
<html>
  <head>
    <title>Autocomplete Image dan Custom HTML Menggunakan Jquery PHP</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    <style type="text/css">
      .ui-autocomplete-row
      {
        padding:8px;
        background-color: #f4f4f4;
        border-bottom:1px solid #ccc;
        font-weight:bold;
      }
      .ui-autocomplete-row:hover
      {
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <br />
    <br />
    <div class="container">
      <h3 align="center">Autocomplete Image dan Custom HTML Menggunakan Jquery PHP</h3>
      <br />
      <br />
      <br />
      <div class="row">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
          <input type="text" id="search_data" placeholder="Enter Student name..." autocomplete="off" class="form-control input-lg" />
        </div>
        <div class="col-md-3">
        </div>
      </div>
    </div>
  </body>
</html>
 

 

Jika sudah maka tahap selanjutnya membuat script jquery untuk membantu mengambil data dari datasbe seperti berikut.

<script>
  $(document).ready(function(){
      
    $('#search_data').autocomplete({
      source: "fetch.php",
      minLength: 1,
      select: function(event, ui)
      {
        $('#search_data').val(ui.item.value);
      }
    }).data('ui-autocomplete')._renderItem = function(ul, item){
      return $("<li class='ui-autocomplete-row'></li>")
        .data("item.autocomplete", item)
        .append(item.label)
        .appendTo(ul);
    };

  });
</script>

Dan langkah terakhir teman-teman buat file baru dengan nama fetch.php seperti berikut ini. 

<?php


if(isset($_GET["term"])){
 $connect = new PDO("mysql:host=localhost; dbname=test", "dumet", "school");

 $query = "
 SELECT * FROM tbl_student
 WHERE student_name LIKE '%".$_GET["term"]."%'
 ORDER BY student_name ASC
 ";

 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 $total_row = $statement->rowCount();

 $output = array();
 if($total_row > 0){
  foreach($result as $row)
  {
   $temp_array = array();
   $temp_array['value'] = $row['student_name'];
   $temp_array['label'] = '<img src="images/'.$row['image'].'" width="70" />&nbsp;&nbsp;&nbsp;'.$row['student_name'].'';
   $output[] = $temp_array;
  }
 }else{
  $output['value'] = '';
  $output['label'] = 'No Record Found';
 }

 echo json_encode($output);
}

?>

Jika sudah selesai maka teman-teman silahkan dibuka di browsernya untuk melihat tampilannya seperti apa.

Demikian artikel kali ini tentang cara membuat Autocomplete Image dan Custom HTML Menggunakan jQuery PHP

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More