Codeigniter JQuery Ajax Autocomplete Search using Typeahead

In this post. i will explain how to create step by step dynamic autocomplete using typeahead js ajax in codeigniter application. we will take simple bootstrap text box and make it dynamic real time search using typeahead jquery ajax in codeigniter application.

As we know, codeigniter is famous framework of php. Also typeahead.js a flexible javascript library that provides a strong foundation for autocomplete search. so if you require to create autocomplete from database then you have to use typeahead library that make better ui too. Also you can simply customize easily.

For this example, we will create one "tags" table in our database and then we will create two routes. One for render view of form and design then we will create another for ajax json data. here i explain everything step by step for create example. you can also see demo and download full code at the bottom.

Let's just follow few step and you will get full demo as like i added.

Preview:

Step 1: Create Table

In first table we must have one table with some dummy records. For this example i will create "tags" table and dummy records as like bellow query:

tags table

CREATE TABLE IF NOT EXISTS `tags` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `meta_keyword` text COLLATE utf8_unicode_ci NOT NULL,
  `meta_description` text COLLATE utf8_unicode_ci NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=533 ;

Step 2: Make database configuration

in second step, we will add database details like username, password and database name. so you can do it from here.

application/config/database.php

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

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

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'root',
	'database' => 'test',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Step 3: Add Route

In this step we need to add two routes for render view and for ajax. so open routes.php file and add code like as bellow:

application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

$route['ajax-view'] = 'welcome/index';
$route['ajaxpro'] = 'welcome/ajaxPro';

Step 4: Create Controller

In this step we have to create new method in Welcome Controller, in this file we will write search database logic.

So, create new method on this controllers folder and put bellow code:

application/controllers/Welcome.php

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

class Welcome extends CI_Controller {

    /**
    * Constructor of Controller
    *
    * @return Response
   */
    public function __construct() {
        parent::__construct();
        $this->load->database();
    }

    /**
    * Create from display view
    *
    * @return Response
   */
    public function index()
    {
        $this->load->view('ajaxView');
    }

    /**
    * response of ajax json
    *
    * @return Response
   */
    public function ajaxPro()
    {
        $query = $this->input->get('query');
        $this->db->like('name', $query);

        $data = $this->db->get("tags")->result();

        echo json_encode( $data);
    }
}

Step 5: Create View File

In last step, we have to create view file, we will create new view file "ajaxView.php" on views folder and put bellow code on that file.

application/views/ajaxView.php

<html lang="en">
<head>
    <title>Codeigniter 3 - jquery ajax autocomplete search using typeahead example- ItSolutionStuff.com</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>  
</head>
<body>

<div class="container">
    <h1>Codeigniter 3 - jquery ajax autocomplete search using typeahead example- ItSolutionStuff.com</h1>
    <input class="typeahead form-control" type="text">
</div>

<script type="text/javascript">
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get('/ajaxpro', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
</script>

</body>
</html>

Now it's all done steps.

You can check demo and also download full code from bellow button.

I hope it can help you...