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.
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:
Input / Insert new data to display data when autocomplete search:
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:
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:<method_name> * @see http:
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> <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> <link href='<?php echo base_url();?>assets/js/jquery.autocomplete.css' rel='stylesheet' /> <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({ </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() {
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:
Click image to enlarge
Click image to enlarge
Click image to enlarge
All my tutorials about Autocomplete with codeigniter, hopefully can add knowledge of friend twd all ^ _ ^
Comments
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.