Codeigniter Tutorials

Home » Codeigniter »

Jquery Ajax Autocomplete Search using Typeahead

File name : Autocomplete.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Autocomplete extends CI_Controller {
public function __construct() {
parent::__construct();
//$this->load->database();
}
public function index()
{
$this->load->view('autocomplete_view');
}
public function auto_data()
{
$query = $this->input->get('query');
$this->db->like('name', $query);
$data = $this->db->get("tags")->result();
echo json_encode( $data);
}
}

autocomplete_view.php

<html lang="en">
<head>
<title>jquery ajax autocomplete search using typeahead example</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>jquery ajax autocomplete search using typeahead example.</h1>
<input class="typeahead form-control" type="text">
</div>

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

</body>
</html>

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 ;

Example

Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead

<?php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
?>

model

<?php

if (!defined('BASEPATH'))
exit('No direct script access allowed');

class Site extends CI_Model {
private $_countryID;
private $_countryName;

// set country id
public function setCountryID($countryID) {
return $this->_countryID = $countryID;
}
// set country Name
public function setCountryName($countryName) {
return $this->_countryName = $countryName;
}
// get All Countries
public function getAllCountries() {
$this->db->select(array('c.id as country_id', 'c.name as country_name'));
$this->db->from('countries as c');
$this->db->like('c.name', $this->_countryName, 'both');
$query = $this->db->get();
return $query->result_array();
}

}

?>

Controller

<?php

if (!defined('BASEPATH'))
exit('No direct script access allowed');

class Location extends CI_Controller {

public function __construct() {
parent::__construct();
$this->load->model('Site', 'location');
}

// get state names
public function index() {
$data['page'] = 'Autocomplete';
$data['title'] = 'Autocomplete | TechArise';
$this->load->view('autocomplete/index', $data);
}

// get Country Autocomplete
public function getCountryAutocomplete() {
$json = array();
$countryName = $this->input->post('query');
$this->location->setCountryName($countryName);
$geCountries = $this->location->getAllCountries();
foreach ($geCountries as $key => $element) {
$json[] = array(
'country_id' => $element['country_id'],
'country_name' => $element['country_name'],
);
}
$this->output->set_header('Content-Type: application/json');
echo json_encode($json);
}

}
?>

view

<?php
$this->load->view('templates/header');
?>
<script src="<?php echo HTTP_JS_PATH; ?>typeahead.js"></script>
<div class="row">
<div class="col-lg-12">
<h2>Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead</h2>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<a href="#" class="pull-right btn btn-info btn-xs" style="margin: 2px;"><i class="fa fa-mail-reply"></i> Back To Tutorial</a>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12">
<span id="success-msg"></span>
</div>
</div>
<form class="dynamic-autocomplete-frm" id="dynamic-dependent-frm">
<input type="hidden" name="autocomplete" id="field-autocomplete">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="text" name="add_autocomplete" class="form-control" id="add-autocomplete" placeholder="Enter Country Name">
</div>
</div>
</div>

</form>
<?php
$this->load->view('templates/footer');
?>

Js

// autocomplete functionality
if (jQuery('input#add-autocomplete').length > 0) {
jQuery('input#add-autocomplete').typeahead({
displayText: function(item) {
return item.country_name
},
afterSelect: function(item) {
this.$element[0].value = item.country_name;
jQuery("input#field-autocomplete").val(item.country_id);
},
source: function (query, process) {
jQuery.ajax({
url: baseurl + "location/getCountryAutocomplete",
data: {query:query},
dataType: "json",
type: "POST",
success: function (data) {
process(data)
}
})
}
});
}

Itechtuto