Codeigniter Tutorials

Home » Codeigniter »

Autocomplete Jquery using Ajax

view

File Name :

<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>

controller

<?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);
}
}

table

id slug name
1 ind india
2 indo indonesia

File Name :

Example :

Autocomplete search Using select2

File Name :

CREATE `db_demo`;
USE `db_demo`;
CREATE TABLE IF NOT EXISTS `tbl_language` (
`id` int(9) NOT NULL AUTO_INCREMENT,
`lname` varchar(50) NOT NULL,
`lcode` varchar(2) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6;

INSERT INTO `tbl_language` (`id`, `lname`, `lcode`) VALUES
(1, 'English', 'en'),
(2, 'Afrikaans', 'af'),
(3, 'Greek', 'el'),
(4, 'Finnish', 'fi'),
(5, 'Spanish', 'es');

File Name : SearchModel.php

function getLanguage($str)
{
$this->db->select('id, lname as text');
$this->db->like('lname', $str);
$query = $this->db->get('tbl_language');
return $query->result();
}

File Name : SearchController.php

<?php
class SearchController extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->database();
}

function index()
{
$this->load->view('SearchView');
}

function search()
{
$q = $this->input->get('q');
$this->load->model('SearchModel');
echo json_encode($this->SearchModel->getLanguage($q));
}
}
?>

File Name : SearchView.php

<!DOCTYPE html>
<html>
<head>
<title>CodeIgniter Search from Database Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>CodeIgniter Autocomplete Demo</h3>
<select id="language" name="language" class="itemName form-control" style="width:300px" ></select>

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<script type="text/javascript">
$('#language').select2({
placeholder: '-Select Language-',
minimumInputLength: 1,
ajax: {
url: "<?php echo base_url();?>index.php/SearchController/search",
dataType: 'json',
delay: 250,
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>
</body>
</html>

File Name :

Example : Autocomplete Text box from database.

File Name : Autocomplete_User.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Autocomplete_User extends CI_Controller {
public function __construct()
{
parent::__construct();
}
public function index() {
$this->load->view('autocompletedata');
}
public function getAllUsers(){
$name = $this->input->post('name',TRUE);
$dataUsers = $this->db->select('name,id')->from('users')->like('name',$name)->limit(10,0)->get()->result();
$data = array(
'list' => $dataUsers
);
echo json_encode($data);
}
}

Autocomplete View

File Name : autocompletedata.php

<html>
<head>
<title>Autocomplete Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<style>
h3{
font-family: Verdana;
font-size: 18pt;
font-style: normal;
font-weight: bold;
color:red;
text-align: center;
}
table{
font-family: Verdana;
color:black;
font-size: 12pt;
font-style: normal;
font-weight: bold;
text-align:left;
border-collapse: collapse;
}
.error{
color:red;
font-size: 11px;
}
</style>
<h3>Atocomplete Example</h3>
<?php echo form_open('autocomplete',array('name'=>'autocomplete')); ?>
<table align="center" cellpadding = "5">
<tr>
<td>Name</td>
<td><input type="text" size="40px" name="name" id="name" /></td>
<td class="error"><?php echo form_error('name'); ?></td>
</tr>
</table>
<input type="hidden" size="40px" name="userId" id="userId" />
<?php echo form_close();?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script language="javascript" type="text/javascript">
$J = jQuery.noConflict();
$J( function() {
$J("#name").autocomplete({
source: function(request, response) {
$.ajax({
url: "<?php echo base_url();?>Autocomplete_User/getAllUsers",
data: { code: $("#name").val()},
dataType: "JSON",
type: "POST",
success: function(data){
var array = data.error ? [] : $.map(data.list,function(m){
return{
label:m.name,
value:m.id
};
});
response(array);
}
});
},
focus: function(event, ui) {
event.preventDefault();
$("#name").val(ui.item.label);
},
select: function (event, ui) {
event.preventDefault();
$("#name").val(ui.item.label);
$("#userId").val(ui.item.value);
},
minLength: 1
});
});
</script>
</body>
</html>

Itechtuto

Codeigniter Tutorials

Autocomplete Jquery using Ajax

view

File Name :

controller

table

File Name :

Example :

File Name :

File Name : SearchModel.php

File Name : SearchController.php

File Name : SearchView.php

File Name :

File Name : Autocomplete_User.php

File Name : autocompletedata.php

Connect Us Socially:

Quick Links