Codeigniter Autocomplete with

Jquery UI [Complete Guide]

 FEBRUARY 20, 2018
 If you are serious about codeigniter, you should learn how to create

autocomplete with codeigniter.

 Why?

 Because, User Experience (UX) is the most important thing in an

application. If you ignore the User Experience, you are in trouble.

 In this tutorial, you will learn all the things you need to know about

how to create autocomplete with codeigniter.

 Let’s get start it.

 What is Autocomplete?

 Autocomplete is a suggestion that is displayed to increase user

experience (UX).

 If you googling on google and typing some keywords, then you will

see autocomplete like this:



 If you search for your favorite videos on youtube, you will also find

autocomplete like this:

 So, how to create autocomplete like google and youtube?

 Let’s get start it.



 Step 1. Preparation
 This is important!

 If you missed this step, it means you missed the whole of this tutorial.

 Good preparation will determine your success following this tutorial.

The better your preparation, the more likely you will succeed in

following this tutorial.

 Do not skip this step, though it feels complex.

 So, what do you need to prepare?

 Here’s the list:

 1. Codeiginter

 Codeigniter is the main php framework we will use in this tutorial. If

you do not have it yet, please download it at the official

website: www.codeigniter.com

 2. Bootstrap
 Bootstrap is a framework to beautify the user interface (UI). If you do

not have it yet, please download it first at the official

website: www.getbootstrap.com

 3. Jquery

 This is important!

 Jquery is a javascript library that serves to help simplify the

manipulation of html elements and run the autocomplete well.

 If you do not have it yet, please download it at the official

website: www.jquery.com

 4. Jquery UI

 Jquery UI is a javascript library that helps make autocomplete easier.

 If you do not have it yet, please download it at the official

website: http://jqueryui.com/


  Step 2. Database preparation
 In this tutorial, I use mysql as Database Management System

(DBMS).

 If you also use mysql, you will love this tutorial.

 But,

 If you are using other DBMS like Oracle, SQL Server, Maria DB, or

MongoDB.

 No, Problem!

 Provided you understand SQL (Structured Query Language) better.

 Ok, Let's continue!

 Please create a database, here I create a database with

named autocomplete_db.

 If you create a database with the same name it will be better.

 Please execute this query to create the database:

1 CREATE DATABASE autocomplete_db;

 That query will generate a database with named autocomplete_db.

  Next,

 Create a table with name blog with structure like this:

 To create a table structure like the picture above,

 You could follow this query:

1 CREATE TABLE blog(

2 blog_id INT(11) PRIMARY KEY AUTO_INCREMENT,

3 blog_title VARCHAR(100),

4 blog_description TEXT

)ENGINE=INNODB;
5

 Next, insert some data in the blog table by executing the following

query:

1 INSERT INTO blog (blog_title,blog_description) VALUES

('Basic Database System','Complete Guide Basic of database system for beginner'),

2
('Upload Image using codeigniter','Easy way to create upload image using codeigniter
3
('CRUD with codeigniter and Bootstrap','This is tutorial how to create CRUD applicat
4 bootstrap');

 So that look like this:



 Step 3. Codeigniter Installation

 Next,

 Extract codeigniter that has been downloaded earlier to www folder

(if you use wampserver) or htdocs (if you use XAMPP).

 Because I use wampserver. So, I extract it to c:/wamp/www/

 And then, rename codeigniter project to be autocomplete.

 Like this:

 Open autocomplete folder and create assets folder, And then

create css and js folder inside the assets folder. After that, include
 the bootstrap, jquery UI, and jquery files inside

the css and js folder.

 So that look like this:

 Step 4. Codeigniter Configuration

 Next step is the configuration on the codeigniter.

 Here are some files you need to configure:

 1. Autoload.php

 To configure the autoload.php, please open the folder:

  application/config/autoload.php

 like this:

 Open autoload.php using text editor like Notepad++ or Sublime Text.

 And then find this code:

1 $autoload['libraries'] = array();

2 $autoload['helper'] = array();

 Set to be like this:

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

2 $autoload['helper'] = array('url');

 2. Config.php
  To configure the config.php, please open the folder:

 application/config/config.php

 like this:

 Open config.php file using text editor, and then find this code:

1 $config['base_url'] = '';

 And then set to be like this:

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

 3. Database.php
  To configure the database.php, please open the folder:

 application/config/database.php

 like this:

 Open database.php file using text editor, and then find this code:

1 $active_group = 'default';

$query_builder = TRUE;
2

3
$db['default'] = array(
4
'dsn' => '',
5
'hostname' => 'localhost',
6
'username' => '',
7
'password' => '',
8 'database' => '',
9 'dbdriver' => 'mysqli',
10 'dbprefix' => '',

11 'pconnect' => FALSE,

'db_debug' => (ENVIRONMENT !== 'production'),

12
'cache_on' => FALSE,
13
'cachedir' => '',
14
'char_set' => 'utf8',
15
'dbcollat' => 'utf8_general_ci',
16 'swap_pre' => '',
17 'encrypt' => FALSE,

18 'compress' => FALSE,

19 'stricton' => FALSE,

20 'failover' => array(),

'save_queries' => TRUE

21
);
22

23

24

 And then Set to be like this:

$active_group = 'default';
1
$query_builder = TRUE;
2

3
$db['default'] = array(
4
'dsn' => '',
5
'hostname' => 'localhost',
6 'username' => 'root',
7 'password' => '',

8 'database' => 'autocomlete_db',

9 'dbdriver' => 'mysqli',

'dbprefix' => '',

10
'pconnect' => FALSE,
11
'db_debug' => (ENVIRONMENT !== 'production'),
12
'cache_on' => FALSE,
13
'cachedir' => '',
14 'char_set' => 'utf8',

15 'dbcollat' => 'utf8_general_ci',

'swap_pre' => '',

16
'encrypt' => FALSE,
17
'compress' => FALSE,
18
'stricton' => FALSE,
19
'failover' => array(),
20 'save_queries' => TRUE
21 );

22

23

24

 Step 5. Controller
 Go ahead and create a controller file controllers/Blog.php with the

following this code:

1 <?php

2 class Blog extends CI_Controller{

function __construct(){
3
parent::__construct();
4
$this->load->model('blog_model');
5
}
6

7
function index(){
8
$this->load->view('blog_view');
9 }
10

11 function get_autocomplete(){

12 if (isset($_GET['term'])) {
13 $result = $this->blog_model->search_blog($_GET['term']);

14 if (count($result) > 0) {

foreach ($result as $row)

15
$arr_result[] = $row->blog_title;
16
echo json_encode($arr_result);
17
}
18
}
19 }
20

21 }
22

23

 Step 6. Model
 Go ahead and create a model file models/Blog_model.php with the

following this code:

1
<?php
2
class Blog_model extends CI_Model{
3

4 function search_blog($title){
5 $this->db->like('blog_title', $title , 'both');

6 $this->db->order_by('blog_title', 'ASC');

7 $this->db->limit(10);

return $this->db->get('blog')->result();
8
}
9

10
}
11


  Step 7. View
 Go ahead and create a view file views/blog_view.php with the

following this code:

1 <!DOCTYPE html>

<html>
2
<head>
3
<meta charset="utf-8">
4
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi
5
<title>Autocomplete</title>
6 <link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>"
7 <link rel="stylesheet" href="<?php echo base_url().'assets/css/jquery-ui.css'?>"

8 </head>

9 <body>

<div class="container">
10
<div class="row">
11
<h2>Autocomplete Codeigniter</h2>
12
</div>
13
<div class="row">
14
<form>
15 <div class="form-group">
16 <label>Title</label>

17 <input type="text" class="form-control" id="title" placeholder="T

18 </div>

</form>
19
</div>
20
</div>
21

22
<script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/ja
23
<script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javas
24
<script src="<?php echo base_url().'assets/js/jquery-ui.js'?>" type="text/javas
25 <script type="text/javascript">
26 $(document).ready(function(){

27 $( "#title" ).autocomplete({

source: "<?php echo site_url('blog/get_autocomplete/?');?>"

28
});
29
});
30
</script>
31

32
</body>
33 </html>
34

35

36

37

 Done.

 Open your browser, and visit the following url:

 http://localhost/autocomplete/index.php/blog/

 Then it will appear form with input text. And then type a few keywords

from the blog title in the database, then you will see autocomplete

like this:


 But Wait.!!!

 I will not leave you soon, let's explore the customize.

 This is important!!!

 Autocomple Dropdown
 Autocomplete dropdown is autocomplete where when one option of

autocomplete is selected, it will show other related fields.

 Example:

 When one option of autocomplete is selected, it will show the other

related fields. Like this:

 

 How to create autocomplete like that?

 Let’s begin.

 Open the controller Blog.php, and then change

the get_autocomplete method to be like this:

1 function get_autocomplete(){

2 if (isset($_GET['term'])) {

$result = $this->blog_model->search_blog($_GET['term']);
3
if (count($result) > 0) {
4
foreach ($result as $row)
5
$arr_result[] = array(
6
'label' => $row->blog_title,
7
'description' => $row->blog_description,
8
);
9
echo json_encode($arr_result);
10 }
11 }

12 }
13

 After that, open view blog_view.php, and then change to be like this:

1 <!DOCTYPE html>

2 <html>

<head>
3
<meta charset="utf-8">
4
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi
5
<title>Autocomplete</title>
6
<link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>"
7 <link rel="stylesheet" href="<?php echo base_url().'assets/css/jquery-ui.css'?>"
8 </head>

9 <body>

10 <div class="container">

<div class="row">
11
<h2>Autocomplete Codeigniter</h2>
12
</div>
13
<div class="row">
14
<form>
15
<div class="form-group">
16 <label>Title</label>
17 <input type="text" name="title" class="form-control" id="title" pl

18 </div>

19 <div class="form-group">

<label>Description</label>
20
<textarea name="description" class="form-control" placeholder="D
21
</div>
22
</form>
23
</div>
24
</div>
25

26 <script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/ja

27 <script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javas
28 <script src="<?php echo base_url().'assets/js/jquery-ui.js'?>" type="text/javas

29 <script type="text/javascript">

$(document).ready(function(){
30

31
$('#title').autocomplete({
32
source: "<?php echo site_url('blog/get_autocomplete');?>",
33

34
select: function (event, ui) {
35
$('[name="title"]').val(ui.item.label);
36 $('[name="description"]').val(ui.item.description);
37 }
38 });

39

40 });

41 </script>

42
</body>
43
</html>
44

45

46

47

48

 In the blog_view.php file, there is addition of one

component textarea and there is a change in javascript.

 Done,

 Congratulation you are succeed to create autocomplete dropdown.

  Please visit URL http://localhost/autocomplete/index.php/blog/ for

testing.

 Autocomplete Auto Submit Form

 If you go to google and type something and autocomplete appears,

when you select an option from autocomplete, then the search form

directly submitted without clicking search button.

 How to create autocomplete like that?

 Let’s begin.

 Create a new controller named Tutorial.php with the following code:

1 <?php

2 class Tutorial extends CI_Controller{

function __construct(){
3
parent::__construct();
4
$this->load->model('blog_model');
5
error_reporting(0);
6
}
7

8 function index(){
9 $this->load->view('tutorial_view');
10 }

11
12 function get_autocomplete(){

13 if (isset($_GET['term'])) {

$result = $this->blog_model->search_blog($_GET['term']);
14
if (count($result) > 0) {
15
foreach ($result as $row)
16
$arr_result[] = array(
17
'label' => $row->blog_title,
18 );
19 echo json_encode($arr_result);

20 }

21 }

22 }

23
function search(){
24
$title=$this->input->get('title');
25
$data['data']=$this->blog_model->search_blog($title);
26

27
$this->load->view('search_view',$data);
28
}
29

30 }
31

32

33

 After that create more view files. Here we need two more views.

View for search form (tutorial_view.php) and view to display search

result (search_view.php).

 First, create a view tutorial_view.php with the following code:

1 <!DOCTYPE html>
2 <html>

3 <head>

<meta charset="utf-8">
4
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi
5
<title>Autocomplete</title>
6
<link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>"
7
<link rel="stylesheet" href="<?php echo base_url().'assets/css/jquery-ui.css'?>"
8 </head>
9 <body>

10 <div class="container">

11 <div class="row">

12 <h2>Search</h2>

</div>
13
<div class="row">
14
<form id="form_search" action="<?php echo site_url('tutorial/search');?>
15
<div class="input-group">
16
<input type="text" name="title" class="form-control" id="title" pl
17 <span class="input-group-btn">
18 <button class="btn btn-info" type="submit">Search</button>

19 </span>

20 </div>

21 </form>

</div>
22
</div>
23

24
<script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/ja
25
<script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javas
26
<script src="<?php echo base_url().'assets/js/jquery-ui.js'?>" type="text/javas
27 <script type="text/javascript">
28 $(document).ready(function(){

29

30 $('#title').autocomplete({

31 source: "<?php echo site_url('tutorial/get_autocomplete');?>",

32
33 select: function (event, ui) {

34 $(this).val(ui.item.label);

$("#form_search").submit();
35
}
36
});
37

38
});
39
</script>
40

41 </body>
42 </html>
43

44

45

46

 After that, create the view again and give

name search_view.php with code as follows:

1 <!DOCTYPE html>
2 <html>

3 <head>

4 <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fi

5
<title>Search Result</title>
6
<link rel="stylesheet" href="<?php echo base_url().'assets/css/bootstrap.css'?>"
7
</head>
8
<body>
9 <div class="container">
10 <div class="row">
11 <h2>Search Result</h2>

12 </div>

13 <div class="row">
14 <table class="table table-striped">

15 <thead>

<tr>
16
<th>Title</th>
17
<th>Description</th>
18
</tr>
19
</thead>
20 <tbody>
21 <?php foreach($data as $row):?>

22 <tr>

23 <td><?php echo $row->blog_title;?></td>

24 <td><?php echo $row->blog_description;?></td>

</tr>
25
<?php endforeach;?>
26
</tbody>
27
</table>
28
</div>
29 </div>
30

31 <script src="<?php echo base_url().'assets/js/jquery-3.3.1.js'?>" type="text/ja

32 <script src="<?php echo base_url().'assets/js/bootstrap.js'?>" type="text/javas

33

34 </body>

35 </html>

36

37

38

 Done.

 Now, please visit the

URL http://localhost/autocomplete/index.php/tutorial for testing.

 If it goes well, it will look like this:

 Type in the keyword "codeigniter" then it will look like this:

 And then click one of the options autocomplete available, then the

form will be directly submitted without the need to click the search

button

 Awesome right?

 And then, you will see the result look like this:


 Congratulations, you did it.!

 Conclusion
 In today's tutorial is how to create autocomplete with codeigniter and

jquery UI.

 Autocomplete is a suggestion shown to improve User

Experience (UX).

 There are 3 types of autocompletes that you have learned: how to

display autocomplete from the database, how to create autocomplete

dropdown, and how to create a search with autocomplete auto

submit form.