Tutorial How to Create Autocomplete with CodeIgniter

uncategorized codeigniter

In this tutorial we will discuss how to create autocomplete with codeigniter , in this discussion I assume all friends TWD already understand the initial setting of codeigniter. If not please learn first two tutorials below

Autocomplete or word completion is a feature where the application predicts the rest of the words typed by the user.

Autocomplete (Photo: Etsy.com )

The first step we create a database with the name of the exercise in phpmyadmin:

Database: `latihan`

Database exercises

Next create tables and fields in the training database:

-- -- 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;

Table autocomplete

Input / Insert new data to display data when autocomplete search:

-- -- 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 autocomplete data

The phpmyadmin training database will look like this:

Click image to enlarge

Click image to enlarge

Open config / autoload.php, then find the code below and adjust it like this:

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

Config / autoload.php

Open config / database.php, then find the code below and adjust it like this:

$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

To start creating autocomplete we need javascript, please download:

Download css and js - click the link to download

The structure or placement of the file will look like this, please create a folder and adjust it:

Then open the controllers / welcome.php, adjust as below:

<?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

Create a new file index.php , open the view / adjust as below:

<?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' rel='stylesheet' /> <!-- Memanggil file .css autocomplete_ci/assets/css/default.css --> <link href='<?php echo base_url();?>assets/css/default.css' rel='stylesheet' /> <script type='text/javascript'> var site = "<?php echo site_url();?>"; $(function(){ $('.autocomplete').autocomplete({ // serviceUrl berisi URL ke controller/fungsi yang menangani request kita serviceUrl: site+'/autocomplete/search', // fungsi ini akan dijalankan ketika user memilih salah satu hasil request onSelect: function (suggestion) { $('#v_nim').val(''+suggestion.nim); // membuat id 'v_nim' untuk ditampilkan $('#v_jurusan').val(''+suggestion.jurusan); // membuat id 'v_jurusan' untuk ditampilkan } }); }); </script> </head> <body> <div id="content"> <h1>Autocomplete</h1> <form action="<?php echo site_url('admin/c_admin/add_orders'); ?>" method="post"> <div class="wrap"> <table> <tr> <td><small>Nama :</small><br><input type="search" class='autocomplete nama' id="autocomplete1" name="nama_customer"/></td> </tr> <tr> <td><small>Jurusan :</small><br><input type="text" class='autocomplete' id="v_jurusan" name="nama_customer"/></td> </tr> <tr> <td><small>NIM :</small><br><input type="text" class='autocomplete' id="v_nim" name="nama_customer"/></td> </tr> </div> </form> </div> </body> </html>

Views / index.php

Create a new file autocomplete.php to display data when searched, open controllers / adjust as below:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Autocomplete extends CI_Controller { public function __construct() { parent::__construct(); } public function search() { // tangkap variabel keyword dari URL $keyword = $this->uri->segment(3); // cari di database $data = $this->db->from('autocomplete')->like('nama',$keyword)->get(); // format keluaran di dalam array foreach($data->result() as $row) { $arr['query'] = $keyword; $arr['suggestions'][] = array( 'value' =>$row->nama, 'nim' =>$row->nim, 'jurusan' =>$row->jurusan ); } // minimal PHP 5.2 echo json_encode($arr); } } ?>

Controllers / autocomplete.php

The last one please create a css to design the input form etc., if you have not created the folder assets / css please make first on the folder website friends, for the structure of folders and files please see in the picture above, thefollowing script from default.css :

body { font-family: verdana,arial,sans-serif; margin: 0px; padding: 0px; } .wrap { width:50%; background:#F0F0F0; margin:auto; padding: 25px; overflow: hidden; } h1 { text-align: center; } input.nama { font-size:28px; width:380px; } input, textarea { border: 1px solid #CCC; }