CodeIgniter 4 AJAX Tutorial
About Lesson

To create an autocomplete example in CodeIgniter 4, follow these steps:


Step 1: Database Setup

CREATE TABLE `state_info` (
  `id` int(11) NOT NULL,
  `country_id` varchar(10) NOT NULL,
  `name` varchar(100) NOT NULL,
  `tin` varchar(10) NOT NULL,
  `code` varchar(100) NOT NULL,
  `ip_address` varchar(100) DEFAULT NULL,
  `created_at` datetime DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `status` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;
ALTER TABLE `state_info`


Step 2: Controller

Create a controller to handle CRUD operations. Create a new file named Autocomplete.php in the app/Controllers/autocompletefolder.

namespace App\Controllers\autocomplete;

use App\Controllers\BaseController;
use App\Models\state\StateModel;

class Autocomplete extends BaseController {

public function __construct() {
$db = db_connect();
$this->state = new StateModel($db);

public function index() {

public function find() {
$data = [];
$data ['content_title'] = "Autocomplete Example";
$data ['main_content'] = "autocomplete/find";
echo view('innerpages/template', $data);

public function search() {
$keyword = $this->request->getPost('keyword');
$where = 'name LIKE "%'.$keyword.'%"';
$result = $this->state->getEntryList($where);
$list = [];
foreach($result as $row) {
$list [] = [
'id' => $row->id,
'value' => $row->name,
echo json_encode($list);


Step 3: Model

Create a model to handle database operations. Create a new file named StateModel.php in the app/Models/statefolder.

namespace App\Models\state;

use CodeIgniter\Model;
use CodeIgniter\Database\ConnectionInterface;

class StateModel extends Model {

protected $db;

public function __construct(ConnectionInterface &$db) {
$this->db =& $db;
$this->table = 'state_info';

public function addEntry($data) {
return $this->db->insertID();

public function getEntry($where) {
return $this->db->table($this->table)

public function getEntryList($where = 0) {
if($where) {
return $this->db->table($this->table)
} else {
return $this->db->table($this->table)


public function updateEntry($where, $data) {
return $this->db->table($this->table)

public function deleteEntry($where) {
return $this->db->table($this->table)


Step 4: Create Views

Create views (find.php) in the app/Views/autocomplete folder for listing, creating, updating, and deleting records.


<!DOCTYPE html>
<html lang="en">

<?php echo $content_title; ?>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link href="" rel="stylesheet" />
<link rel="stylesheet" href="//"></link>

<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<!-- Autocompelete -->
<script src=""></script>


<div class="container">
<div class="jumbotron">
<h1>Autocomplete Example </h1>
<p>CodeIgniter 4.</p>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Enter Keywords</label>
<input type="text" name="keyword" id="keyword" class="form-control" placeholder="Enter keywords" autocomplete="off" required>

$(document).ready(function() {

source: function(request, response) {
$.post('<?php echo base_url("autocomplete/search"); ?>', {keyword : request.term}, function(result) {
}, 'json')
minLength: 1,
select: function( event, ui ) {
console.log( "Selected: " + ui.item.value + " aka " + );




Step 5: Set Up Routes

Edit the app/config/Routes.php file to define routes for your controller.

// autocomplete
$routes->get('autocomplete/find', 'autocomplete\Autocomplete::find');
$routes->post('autocomplete/search', 'autocomplete\Autocomplete::search');


Step 6: Run Project & Output


CodeIgniter 4 - autocomplete