PHP Codeigniter 3 – Jquery Ajax Autocomplete Search using Typeahead
In this post we will give you information about PHP Codeigniter 3 – Jquery Ajax Autocomplete Search using Typeahead. Hear we will give you detail about PHP Codeigniter 3 – Jquery Ajax Autocomplete Search using TypeaheadAnd how to use it also give you demo for it if it is necessary.
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 >
<h1>Codeigniter 3 - jquery ajax autocomplete search using typeahead example- ItSolutionStuff.com</h1>
<input 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…
Hope this code and post will helped you for implement PHP Codeigniter 3 – Jquery Ajax Autocomplete Search using Typeahead. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs