Membuat Autocomplete Form Codeigniter dan AJAX

Pernahkan kamu menemui sebuah formulir misalnya form barang. Ketika kode produk yang diinput maka semua informasi seperti stok, harga supplier otomatis terisi. Ini akan membuat waktu kita lebih efisien karena tidak perlu input data satu persatu. Pada tutorial kita akan membuat autocomplete form menggunakan Codeigniter dan AJAX. Dari form itu nantinya bisa auto fill sesuai data yang ada di database mysql.

Mari kita simak langkah-langkahnya dibawah ini.

Langkah 1 : Menyiapkan Bahan-Bahan

Pertama kita siapkan bahan-bahan dibawah ini silahkan download dulu, jika kalian sudah punya tinggal skip saja.

1. XAMPP (https://www.apachefriends.org/download.html)
2. Codeigniter (https://www.codeigniter.com/download)
3. jQuery Ajax (https://cdn.imamdev.com/js/jquery-3.3.1.min.js)

Ekstrak framework codeigniter kemudian buat folder project di htdocs misalnya barang. Lalu copy file codeigniter ke C:/xampp/htdocs/barang. Untuk file jquery-3.3.1.min.js bisa di copy ke folder assets codeigniter.

Langkah 2 : Membuat Database

Buatlah sebuah database dengan nama barang. Kemudian buat tabel dengan nama produk dengan struktur sebagai berikut :

Setelah membuat tabel, tambahkan beberapa data didalamnya untuk contoh.

Langkah 3 : Konfigurasi Codeigniter

Ada beberapa konfigurasi yang perlu kita atur dalam tutorial ini yaitu :
Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/barang/';

Terakhir buka application/config/database.php

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'barang',
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

Langkah : 4 Membuat Model Dengan Nama Model_produk.php

Buatlah model Model_produk.php kemudian isi kode seperti ini :

<?php class Model_produk extends CI_Model{ 
     
    function tampil_data(){ 
       return $this->db->get('produk');
    }
     
    function cari($id){
        $query= $this->db->get_where('produk',array('kode_produk'=>$id));
        return $query;
    }
}
?>

Pada Model_produk terdapat 2 function, yaitu function tampil_data dan function cari .

function tampil_data berfungsi untuk mengambil semua data produk yang nantinya akan digunakan untuk autocomplete.

function cari berfungsi untuk mengambil data yang dicari untuk digunakan sebagai auto fill isian form sesuai dengan parameter kode_produk.

Langkah 5 : Membuat Controller Dengan Nama Produk.php

buatlah sebuah kontroler dengan nama Produk.php kemudian tulis kode berikut :

<?php class Produk extends CI_Controller { 
     function __construct() { 
           parent::__construct(); 
           $this->load->model('model_produk');
    }
 
    public function index()
    {
            $data['record']=  $this->model_produk->tampil_data();
            $this->load->view('view_data',$data);
    }
     
    public function cari(){
        $kode_produk=$_GET['kode_produk'];
        $cari =$this->model_produk->cari($kode_produk)->result();
        echo json_encode($cari);
    } 
}
?>

Controller ini mempunyai 2 function yaitu function index dan function cari.

function index berfungsi mengambil data produk dari model_produk yang kemudian akan dikirim ke view_data

function cari berfungsi untuk mendapatkan data produk yang akan dicari dari model_produk yang nantinya akan dikirim untuk mengisi form otomatis.

Langkah 6 : Membuat View Dengan Nama view_data.php

Buat sebuah view dengan nama view_data.php kemudian tuliskan kode berikut :

<script src="<?php echo base_url(); ?>assets/jquery-3.3.1.min.js"></script>
<form autocomplete="off">
    <h1>Contoh Autocomplete</h1>
    <div>
        <label>Kode Produk</label><br>
        <input list="data_produk" type="text" name="kode_produk" id="kode_produk" placeholder="kode produk / nama produk" onchange="return autofill();">
    </div>
    <div>
        <label>Nama Produk</label><br>
        <input type="text" name="nama_produk" id="nama_produk">
    </div>
    <div>
        <label>Keterangan</label><br>
        <textarea name="keterangan" id="keterangan">
 
        </textarea>
    </div>
    <div>
        <label>Harga</label><br>
        <input type="text" name="harga" id="harga">        
    </div>
</form>
 
<datalist id="data_produk">
    <?php
    foreach ($record->result() as $b)
    {
        echo "<option value='$b->kode_produk'>$b->nama_produk</option>";
    }
    ?>
     
</datalist>   
<script>
    function autofill(){
        var nim =document.getElementById('kode_produk').value;
        $.ajax({
                       url:"<?php echo base_url();?>index.php/barang/cari",
                       data:'&kode_produk='+kode_produk,
                       success:function(data){
                           var hasil = JSON.parse(data);  
                     
            $.each(hasil, function(key,val){ 
                 
               document.getElementById('kode_produk').value=val.kode_produk;
               document.getElementById('nama_produk').value=val.nama_produk;
               document.getElementById('keterangan').value=val.keterangan;
               document.getElementById('harga').value=val.harga;  
                                
                     
                });
            }
                   });
                   
    }
</script>

Langkah 7 : Test Project

Untuk melakukan test project buka di browser dengan alamat http://localhost/barang. Tampilan nya nanti akan seperti ini. Ketika kita mengetikkan kode produk atau nama makan form isian yang lain akan otomatis terisi.