Autocomplete Textbox in CodeIgniter using Typeahead

In this tutorial you will learn about the Autocomplete Textbox in CodeIgniter using Typeahead and its application with practical example.

In this Autocomplete Textbox in CodeIgniter using Typeahead Js, I will show you how to create a dynamic database driven ajax jquery autocomplete using typeahead js in codeigniter. In this tutorial we will create a dynamic search dropdown autocomplete which will fetch options from database table using bootstrap typeahead js.

Table Of Contents−

The Typeahead JS is a jquery plugin, it is used to create dynamic autocomplete input with several options. In this example you will learn how to implement typeahead autocomplete in codeigniter.

In this step by step tutorial I will demonstrate how to create a dynamic database driven ajax jquery autocomplete using typeahead js in codeigniter. Please follow the instruction given below:

Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller and Model
Step 6: Create Views Files
Step 7: Run The Application

Download Codeigniter

First of all you need to download the latest version of Codeigniter 4.

Basic Configurations

Now, we need to setup some codeigniter basic configurations in your project as following.

//change the baseUrl
public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/your_project_name/';
//remove the index.php from indexPage
public $indexPage = '';
//change the uriProtocol
public $uriProtocol = 'REQUEST_URI';
To
public $uriProtocol = 'PATH_INFO';

//change the baseUrl

public $baseURL = 'http://localhost:8080';

public $baseURL = 'http://localhost/your_project_name/';

//remove the index.php from indexPage

public $indexPage = '';

//change the uriProtocol

public $uriProtocol = 'REQUEST_URI';

public $uriProtocol = 'PATH_INFO';

Create a Database in table

Now you need to create some database tables in your codeigniter application database. Please use the following sql query to create database tables.

CREATE TABLE IF NOT EXISTS `students` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(64) NOT NULL,
  `last_name` varchar(64) NOT NULL,
  `address` text NOT NULL,
  `email` varchar(64) NOT NULL,
  `mobile` varchar(12) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

INSERT INTO `students` (`id`, `first_name`, `last_name`, `address`, `email`, `mobile`) VALUES
(1, 'john', 'doe', 'USA', 'jd@gmail.com', '787878787'),
(2, 'kal', 'mark', 'CANADA', 'km@gmail.com', '7887878787'),
(3, 'James', 'Mary', 'USA', 'jm@gmail.com', '4364373434'),
(4, 'William', 'Elizabeth', 'USA', 'we@gmail.com', '7878787'),
(5, 'Matthew', 'Betty', 'USA', 'mb@gmail.com', '898989'),
(6, 'Anthony', 'Margaret', 'INDIA', 'am@gmail.com', '8989898989'),
(7, 'Donald', 'Ashley', 'CANADA', 'da@gmail.com', '3343434345'),
(8, 'Kevin', 'Carol', 'USA', 'kc@gmail.com', '2223334445');

CREATE TABLE IF NOT EXISTS `students` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`first_name` varchar(64) NOT NULL,

`last_name` varchar(64) NOT NULL,

`address` text NOT NULL,

`email` varchar(64) NOT NULL,

`mobile` varchar(12) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

INSERT INTO `students` (`id`, `first_name`, `last_name`, `address`, `email`, `mobile`) VALUES

(1, 'john', 'doe', 'USA', 'jd@gmail.com', '787878787'),

(2, 'kal', 'mark', 'CANADA', 'km@gmail.com', '7887878787'),

(3, 'James', 'Mary', 'USA', 'jm@gmail.com', '4364373434'),

(4, 'William', 'Elizabeth', 'USA', 'we@gmail.com', '7878787'),

(5, 'Matthew', 'Betty', 'USA', 'mb@gmail.com', '898989'),

(6, 'Anthony', 'Margaret', 'INDIA', 'am@gmail.com', '8989898989'),

(7, 'Donald', 'Ashley', 'CANADA', 'da@gmail.com', '3343434345'),

(8, 'Kevin', 'Carol', 'USA', 'kc@gmail.com', '2223334445');

Connect to Database

Now, lets create a MySQL database and connect it with codeigniter application. After creating database we need to set database credential in application’s app/Config/Database.php file.

app/Config/Database.php

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'codeigniter4_pagination',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter4_pagination',

'DBDriver' => 'MySQLi',

'DBPrefix' => '',

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'production'),

'cacheOn' => false,

'cacheDir' => '',

'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci',

'swapPre' => '',

'encrypt' => false,

'compress' => false,

'strictOn' => false,

'failover' => [],

'port' => 3306,

];

Create Controller and Model
In this step we will create a “Student.php” controller file and the “StudentModel.php” model file. Please paste the below code in corresponding file.

<?php 

namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\StudentModel;
 
class Student extends Controller
{
 
	public function __construct()
    {
         helper(['form', 'url']);
    }
    public function index()
    {   
        return view('list');
    }
	
    function ajaxSearch(){
	$model = new StudentModel();
        $query=$model->like('first_name',$_REQUEST['query'])
          ->select('id, first_name')
          ->limit(10)->get();
	$data_result = $query->getResult();	
	$data = array();		
	foreach ($data_result as $row)
	{
	  $data[] = $row->first_name;
	}		
        echo json_encode($data);
    }  
 
}

?>

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

use App\Models\StudentModel;

class Student extends Controller

{

public function __construct()

{

helper(['form', 'url']);

}

public function index()

{

return view('list');

}

function ajaxSearch(){

$model = new StudentModel();

$query=$model->like('first_name',$_REQUEST['query'])

->select('id, first_name')

->limit(10)->get();

$data_result = $query->getResult();

$data = array();

foreach ($data_result as $row)

{

$data[] = $row->first_name;

}

echo json_encode($data);

}

app/Models/StudentModel.php

<?php 
namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 
class StudentModel extends Model
{
    protected $table = 'Students';
 
    protected $allowedFields = ['first_name','last_name','address','email', 'mobile'];
}
?>

<?php

namespace App\Models;

use CodeIgniter\Database\ConnectionInterface;

use CodeIgniter\Model;

class StudentModel extends Model

{

protected $table = 'Students';

protected $allowedFields = ['first_name','last_name','address','email', 'mobile'];

}

Create Views Files

Lets create a list.php file in app/views

app/views/list.php

<html lang="en">
<head>
    <title>Codeigniter 4 Autocomplete Textbox using Typeahead JS -</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script> 
</head>
<body>
 
 
<div class="container">
    <h1>Codeigniter 4 Autocomplete Textbox using Typeahead JS</h1>
    <input class="typeahead form-control" type="text">
</div>
 
 
<script type="text/javascript">
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get('<?php echo site_url(); ?>student/ajaxSearch', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
</script>
 
 
</body>
</html>

<head>

<title>Codeigniter 4 Autocomplete Textbox using Typeahead JS -</title>

</head>

<body>

<h1>Codeigniter 4 Autocomplete Textbox using Typeahead JS</h1>

</div>

$('input.typeahead').typeahead({

source: function (query, process) {

return $.get('<?php echo site_url(); ?>student/ajaxSearch', { query: query }, function (data) {

console.log(data);

data = $.parseJSON(data);

return process(data);

});

}

});

</script>

</body>

</html>

Run The Application

Now we are ready to run our example so lets start the development server using following artisan command –

php spark serve

1	php spark serve

Now, open the following URL in browser to see the output –

http://localhost:8080/student

1	http://localhost:8080/student

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Autocomplete Textbox in CodeIgniter using Typeahead