Cara Membuat Autocomplete Input di CodeIgniter 3 dengan jQuery AJAX

Autocomplete mempermudah pengguna dalam mengisi form dengan menyarankan data yang relevan. Pada tutorial ini, kita akan membuat form input dengan fitur autocomplete menggunakan jQuery AJAX dan CodeIgniter 3.

Buat Database

Langkah pertama yang kita harus siapkan adalah database dan tabel yang kita ingin jadikan sebagai sumber data yang ingin di cari. Berikut query MySQL untuk buat table yang gua gunakan untuk contoh pada artikel ini.

CREATE TABLE `buku` (
  `id` int NOT NULL,
  `judul` varchar(255) NOT NULL,
  `isbn` varchar(255) NOT NULL,
  `penerbit` varchar(255) NOT NULL,
  `tgl_terbit` date NOT NULL,
  `jml_halaman` varchar(15) NOT NULL,
  `panjang` varchar(15) NOT NULL,
  `lebar` varchar(15) NOT NULL,
  `berat` varchar(15) NOT NULL,
  `deskripsi` text NOT NULL,
  `penulis` varchar(255) NOT NULL,
  `kategori` varchar(255) NOT NULL,
  `harga` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

Buat Controller di Codeigniter 3

Selanjut nya, kita mulai ngoding. Asumsi gua disini kalian sudah paham mengenai config dasar Codeigniter 3 ya. Pertama kita buat file atau class controller. Misal, disini gua buat nama class nya itu "Autocomplete"

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Autocomplete extends CI_Controller {

  public function __construct() {
    parent::__construct();
    $this->load->model('Autocomplete_model');
  }

  public function index() {
    $this->load->view('autocomplete/autocomplete_view');
  }

  public function get_produk() {
    $keyword = $this->input->get('term');
    $data = $this->Autocomplete_model->cari_produk($keyword);
    echo json_encode($data);
  }
}

Buat Model di Codeigniter 3

Selanjutnya, kita buat class model nya untuk proses query ke database. Disini gua memberikan nama class modelnya yaitu "Autocomplete_model".

<?php
class Autocomplete_model extends CI_Model {

  function __construct(){
    parent::__construct();
    $this->db = $this->load->database('default',TRUE);
  }

  public function cari_produk($keyword) {
    $this->db->like('judul', $keyword);
    $query = $this->db->get('buku');
    return $query->result_array();
  }
}

Buat View di Codeigniter 3

Langkah terakhir, kita buat file view untuk antarmuka nya. Disini gua coba kombinasikan antara Jquery.ui dengan bootstrap 5.

<!DOCTYPE html>
<html>
  <head>
    <title>Autocomplete CodeIgniter 3</title>

    <!-- Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <style>
        .autocomplete-form {
            max-width: 500px;
            margin: 80px auto;
            padding: 30px;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            background-color: #f8f9fa;
        }
    </style>
  </head>
  <body>

    <div class="container">
      <div class="autocomplete-form shadow-sm">
          <h4 class="text-center mb-4">Cari Judul Buku</h4>
          <form action="" method="post">
              <div class="mb-3">
                  <label for="judul" class="form-label">Judul Buku</label>
                  <input type="text" id="judul_buku" name="judul_buku" placeholder="Ketik nama buku...">
              </div>
              <div class="text-center">
                  <button type="submit" class="btn btn-primary">Submit</button>
              </div>
          </form>
      </div>
    </div>

    <script>
    $(document).ready(function() {
      $("#judul_buku").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "<?= base_url('autocomplete/get_produk'); ?>",
            dataType: "json",
            data: { term: request.term },
            success: function(data) {
              response($.map(data, function(item) {
                return {
                  label: item.judul,
                  value: item.judul
                };
              }));
            }
          });
        },
        minLength: 2
      });
    });
    </script>

  </body>
</html>

Jika sudah, silahkan akses fungsi controller nya di web browser. Jika berhasil, tampilannya kurang lebih akan seperti ini.

Autocomplete dengan Jquery dan Codeigniter 3 [docs/kuhomi.id].