Codeigniter 4 Select2 Ajax Autocomplete Search Example

In this article, we will explain to you how to create an ajax autocomplete search using select2 in CodeIgniter 4(Codeigniter 4 Select2 Ajax Autocomplete Search Example). We can easily make an ajax Autocomplete search using select2 in CodeIgniter 4 application.

In this example, we use the seclect2 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', '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');

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['q'])
          ->select('id, first_name as text')
          ->limit(10)->get();
	$data_result = $query->getResult();		
        echo json_encode($data_result);
    }  
 
}

?>

<?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['q'])

->select('id, first_name as text')

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

$data_result = $query->getResult();

echo json_encode($data_result);

}

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

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Codeigniter 4 Select2 Ajax Autocomplete Search Example - XpertPhp</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>
<body>
  <div class="container mt-5">
    <select class="search form-control" name="search"></select>
  </div>
</body>
<script>
      $('.search').select2({
        placeholder: '--- Search Student ---',
        ajax: {
          url: '<?php echo site_url(); ?>student/ajaxSearch',
          dataType: 'json',
          delay: 250,
          processResults: function(data){
            return {
              results: data
            };
          },
          cache: true
        }
      });
</script>

</html>

<!doctype html>

<head>

<title>Codeigniter 4 Select2 Ajax Autocomplete Search Example - XpertPhp</title>

</head>

<body>

</div>

</body>

$('.search').select2({

placeholder: '--- Search Student ---',

ajax: {

url: '<?php echo site_url(); ?>student/ajaxSearch',

dataType: 'json',

delay: 250,

processResults: function(data){

return {

results: data

};

cache: true

}

});

</script>

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