Tutorial How to Create Autocomplete with 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
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:

The structure of the training database
Click image to enlarge
Example of database contents
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:
principle
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; } 
Assets / css / default.css
Congratulations, all friends have finished the tutorial well, now please try it in the browser and see the result will be like this:
Aq3
Click image to enlarge
Autocomplete start
Click image to enlarge
Autocomplete typing letters
Click image to enlarge

Download Project autocomplete_ci

All my tutorials about Autocomplete with codeigniter, hopefully can add knowledge of friend twd all ^ _ ^

Comments

Popular posts from this blog

Install deb package via Termux

How to Make Blogger Safelink Converter v3

List of weapon buff materials, effects and how it can be durango wild lands