Cara membuat AutoComplete dengan Menggunakan JQuery UI Codeigniter, How to make autocomplete Codeigniter

Pada kesempatan ini Bangagung.com mau memberikan tutorial mengenai Codeigniter - Cara membuat AutoComplete dengan Menggunakan JQuery UI. pasti teman-teman semua sudah tau fitur dari AutoComplete dari JQuery Ui kan, tinggal mengetikan kata/inputan terus kata yang mengandung inputan tersebut akan muncul sebagai list.

Nah kali ini Bang Agung mau buat dengan menggunakan Framework PHP Codeigniter, langsung saja ikutin langkah-langkah dibawah ini:

Download dulu Codeginiternya disini
Setelah download, extrack file hasil download-an nya dalam folder XAMPP/htdocs

Buat databasenya sesuai keinginan, lalu disini saya membuat contoh table t_kota

CREATE TABLE `belajar_ci`.`t_kota` ( 
`id` INT NOT NULL AUTO_INCREMENT , 
`nama_kota` VARCHAR(15) NOT NULL , PRIMARY KEY (`id`)
) ENGINE = InnoDB;

Setting config databasenya

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'belajar_ci',
	'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
);

Setting Base URLnya

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

Setting Librarynya

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

Buat Model M_kota.php

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

class M_kota extends CI_Model {

  function getKota($data){
    $response = array();

    if(isset($postData['search']) ){

    // Select record
    $this->db->select('*');
    $this->db->like("nama_kota", $postData['search']);

    $records = $this->db->get('t_kota')->result();

    foreach($records as $row ){
      $response[] = array("value"=>$row->id,"label"=>$row->nama_kota);
    }

    }
    return $response;
  }

}

Buat Controllernya Kota.php

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

class Kota extends CI_Controller {

  public function __construct(){

    parent::__construct();
    $this->load->helper('url');

    // Load model
    $this->load->model('M_kota');

  }

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

  public function userList(){
    // POST data
    $data = $this->input->post();

    // Get data
    $list = $this->M_kota->getKota($data);

    echo json_encode($list);
  }

}

Buat Viewnya view_kota.php

<!doctype html>
<html>
  <head>
  <title>Cara Membuat AutoComplete Codeigniter</title>

  <!-- jQuery UI CSS -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  </head>

  <body>
    Cari Kota : <input type="text" id="namaKota">

    <br><br>
    Selected kota by id : <input type="text" id="id_kota" value='0' >

    <!-- Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script type='text/javascript'>
    $(document).ready(function(){

      // Initialize 
      $( "#namaKota" ).autocomplete({
        source: function( request, response ) {
        
        // Fetch data
        $.ajax({
            url: "<?=base_url()?>index.php/kota/getKota",
            type: 'post',
            dataType: "json",
            data: {
              search: request.term
            },
            success: function( data ) {
              response( data );
            }
          });
        },
        select: function (event, ui) {
          // Set selection
          $('#namaKota').val(ui.item.label); // display the selected text
          $('#id_kota').val(ui.item.value); // save selected id to input
          return false;
        }
      });

    });
    </script>
  </body>
</html>

Selesai, Maka hasil akhirnya akan seperti ini

Untuk keseluruhan projectnya dapat diunduh disini

Sekian Tutorial Codeigniter - Cara membuat AutoComplete dengan Menggunakan JQuery UI, Semoga bermanfaat dan nantikan tutorial Bang Agung yang akan datang. Terimakasih.

Cara membuat AutoComplete dengan Menggunakan JQuery UI Codeigniter, How to make autocomplete Codeigniter

Cara Install MongoDB PHP Driver di Windows

← Previous

ReactJS - Tutorial Intallasi ReactJS Untuk Pemula

Next →

Codeigniter - Cara membuat AutoComplete dengan Menggunakan JQuery UI

Anda ingin menghubungi kami?