Codeigniter 4 Autocomplete Textbox using Typeahead JS

September 1, 2021 XpertPhp

In this article, we will explain to you how to create autocomple texbox using typeahead js in CodeIgniter 4(Codeigniter 4 Autocomplete Textbox using Typeahead JS). We can easily make Autocomplete Textbox using Typeahead in CodeIgniter 4 application.

In this example, we use the typeahead js library for autocomplete search from the database in Codeigniter 4. so you can see our following example.
Overview
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

Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create a Database in table
In this step, We will create the database and table.

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', '[email protected]', '787878787'),

(2, 'kal', 'mark', 'CANADA', '[email protected]', '7887878787'),

(3, 'James', 'Mary', 'USA', '[email protected]', '4364373434'),

(4, 'William', 'Elizabeth', 'USA', '[email protected]', '7878787'),

(5, 'Matthew', 'Betty', 'USA', '[email protected]', '898989'),

(6, 'Anthony', 'Margaret', 'INDIA', '[email protected]', '8989898989'),

(7, 'Donald', 'Ashley', 'CANADA', '[email protected]', '3343434345'),

(8, 'Kevin', 'Carol', 'USA', '[email protected]', '2223334445');

Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.

	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,

];

Step 5: Create Controller and Model
In this step, we will create the “Student.php” controller and the “StudentModel.php” model.
app/Controllers/Student.php

<?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'];

}

Step 6: Create Views Files
Finally, we will create the list.php in the app/views directory.

app/views/list.php

<html lang="en">
<head>
    <title>Codeigniter 4 Autocomplete Textbox using Typeahead JS - XpertPhp</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 - XpertPhp</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>

Step 7: Run The Application
We can start the server and run the codeigniter 4 application using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/student

1	http://localhost:8080/student

If you liked this article, you can also download it through our Github Repository.

Please follow and like us: