Today, We want to share with you codeigniter autocomplete from database.In this post we will show you ajax search in codeigniter demo, hear for jquery ui autocomplete in codeigniter with database we will give you demo and example for implement.In this post, we will learn about CodeIgniter Autocomplete Multiple Input Textbox With Database with an example.
PHP Codeigniter 3 – Jquery Ajax Autocomplete Search using Typeahead
Step 1: Create Table
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
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' => 'main8754_988',
'password' => '@#hjdfjhf$$%^&&**%^^',
'database' => 'pakainfo',
'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
application/config/routes.php
$route['default_controller'] = 'welcome'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE; $route['ajax-view'] = 'welcome/index'; $route['ajaxpro'] = 'welcome/dashBoard';
Step 4: Create Controller
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('profiles');
}
/**
* response of ajax json
*
* @return Response
*/
public function dashBoard()
{
$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
application/views/profiles.php
<html lang="en">
<head>
<title>Codeigniter 3 - jquery ajax autocomplete search using typeahead example- www.pakainfo.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- www.pakainfo.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>
I hope you get an idea about Autocomplete in Codeigniter using Typeahead.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.