How to use jquery Autocomplete with Codeigniter
In this post, I will show how to use jquery autocomplete with codeigniter framework.Many times we need autocomplete suggestion for web application to show list of data available in database. Jquery autocomplete provides suggestion list when user start typing into input field.
Follow me step by step We gonna use jquery autocomplete library.
1.) first we create a view where we using a input field to implement jquery autocomplete functionality.Here is the code below.
autocomplete.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();?>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>
2.) Next we create a controller where we are get all data from database and encode with json to pass into view and populate in autocomplete suggestion box.Please find below the code.
UserController .php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class UserController extends CI_Controller {
publicfunction __construct()
{
parent::__construct();
}
public function index() {
$this->load->view('autocomplete');
}
public function getAllUsers(){
$name = $this->input->post('name',TRUE);
$dataUsers = $this->db->select('name,id')->from('tbl_user')->like('name',$name)->limit(10,0)->get()->result();
$data = array(
'list' => $dataUsers
);
echo json_encode($data);
}
}
4.) Change the routes as showing below.
$route['user'] = 'UserController/index'; $route['user/getAllUsers'] = 'UserController/getAllUsers';
Now,move on to browser and type in URL http:\\localhost\myapp\user.When you start typing into input box you will get interface as showing in below.
