Cara Membuat Autocomplete dengan CodeIgniter

Langkah pertama kita buat sebuah database dengan nama latihan di phpmyadmin :

Database: `latihan`
Database latihan

Selanjutnya buat tabel dan field didalam database latihan :

--
-- Struktur dari tabel `autocomplete`
--

CREATE TABLE IF NOT EXISTS `autocomplete` (
  `nim` bigint(20) NOT NULL,
  `nama` varchar(30) NOT NULL,
  `jurusan` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabel autocomplete

Masukan / Insert data baru untuk menampilkan data saat pencarian autocomplete :

--
-- Dumping data untuk tabel `autocomplete`
--

INSERT INTO `autocomplete` (`nim`, `nama`, `jurusan`) VALUES
(1199870012, 'Muhammad Yusuf Hamdani', 'Teknik Informatika'),
(7779127910, 'Tutorial Web Design', 'Tutorial Website'),
(9998711120, 'Rahmayanti', 'PGSD');
Insert data autocomplete

Buka config/autoload.php, kemudia cari code dibawah ini dan sesuaikan seperti ini :

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url','form');
config/autoload.php

Buka config/database.php, kemudia cari code dibawah ini dan sesuaikan seperti ini :

$active_group = 'default';
$active_record = TRUE;

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'latihan';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;
config/database.php

Untuk memulai membuat autocomplete kita perlau javascript, silahkan download 

silahkan buat folder dan sesuaikan 

Kemudia buka controllers/welcome.php, sesuaikan seperti dibawah ini :

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

class Welcome extends CI_Controller {

	/**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -  
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in 
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->view('index');
	}
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
?>
controllers/welcome.php

Buat file baru index.php, buka view/ sesuaikan seperti dibawah ini :

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

<<!DOCTYPE html>
<html>
<head>
    <title>Autocomplete | AZZURA Media</title>


    <!-- Memanggil file .js untuk proses autocomplete -->
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery-1.8.2.min.js'></script>
    <script type='text/javascript' src='<?php echo base_url();?>assets/js/jquery.autocomplete.js'></script>

    <!-- Memanggil file .css untuk style saat data dicari dalam filed -->
    <link href='<?php echo base_url();?>assets/js/jquery.autocomplete.css
Tags: