Hi Dev,

In this quick example, let's see Codeigniter 4 select2 ajax autocomplete search from database example. In this article, we will implement a Codeigniter 4 select2 ajax autocomplete search from the database. This post will give you a simple example of the Codeigniter 4 select2 ajax autocomplete search. This article goes into detail on the example CodeIgniter 4 select2 ajax autocomplete search.

This post is focused on Select2 an ideal jQuery plugin. I explained simply about which gives freedom of customization to a standard select box. This post will give you a simple example of With it. if you want to see an example of you can spruce up a search select box then you are the right place.

We would like to shed a little light on Autocomplete as well. It is also known as word completion. is a powerful feature, mainly found in web and mobile applications. It predicts the rest of the word when the user starts typing the word. The predicted word can be chosen by pressing on the tab key.

This is optional; however, if you have not created the codeigniter app, then you may go ahead and execute the below command:

composer create-project codeigniter4/appstarter ci-news

As soon as the project is downloaded, change the name of the appstarter folder to something like this codeigniter-select. after,go inside the app folder.

cd codeigniter-select

This is the more simpler method then above, straight download the Codeigniter application.

Here this step,Error reporting is essential for debugging the application. It protects from the errors that occurred from the recklessness.

Go to app/Config/Boot/development.php and change the display_errors value to 1 rather then 0.

Repeat the same process in app/Config/Boot/production.php.

ini_set('display_errors', '1');

In this step here we will keep the data that we will be showing using AJAX request through select2 autocomplete search.

Go to PHPMyAdmin and create a new database. If you already have database and table setup then skip this step.

CREATE DATABASE demo;

Create a table users, and propel following data within.

CREATE TABLE users (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    PRIMARY KEY (id)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=1;
  
INSERT INTO `users` (`id`, `name`) VALUES
(1, 'John Doe'),
(2, 'Vanya'),
(3, 'Luther'),
(4, 'Diego'),
(5, 'Klaus'),
(6, 'Ben'),
(7, 'Handler'),
(8, 'Dexter'),
(9, 'Mask'),
(10, 'Aladin');

Now this step,I will Add database configurations like database name, username, password in application/config/database.php.

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

If anyhow you get the Codeigniter – cannot connect to MySQL database error, then change the hostname value based on your local server e.g MAMPP or XAMPP.

# MAMPP
public $default = [
  ...
     'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',
  ...
]

# XAMPP
public $default = [
  ...
     'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',
  ...
]

In this step,I will Create a new controller in app/Controllers/AutocompleteSearch.php. The code here in this file will be solely responsible for fetching the data from the database on AJAX request made from Select2 dropdown.

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;

class AutocompleteSearch extends Controller
{

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index() {
        return view('home');
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function ajaxSearch()
    {
        helper(['form', 'url']);

        $data = [];

        $db      = \Config\Database::connect();
        $builder = $db->table('users');   

        $query = $builder->like('name', $this->request->getVar('q'))
                    ->select('id, name as text')
                    ->limit(10)->get();
        $data = $query->getResult();
        
        echo json_encode($data);
    }

}

So, in this step create a route to show the AJAX autocomplete search element. Open the app/Config/Routes.php and incorporate the following code.

$routes->get('/', 'AutocompleteSearch::index');

Now this srep, I will reached the last step of this tutorial. I am using Bootstrap to design the Select Dropdown HTML element; you can avoid it if you want.

Add Select2 JavaScript and CSS file on top using CDN links. As you can see, we did the same thing.

<!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>Upload Multiple Files or Images in Codeigniter 4 - Mywebtuts.com</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>
    <style>
        .container {
            max-width: 500px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <select class="search form-control" name="search"></select>
    </div>
</body>
<script>

    /*------------------------------------------
    --------------------------------------------
    Autocomplete Search
    --------------------------------------------
    --------------------------------------------*/
    $('.search').select2({
        placeholder: '--- Search User ---',
        ajax: {
            url: '<?php echo base_url('AutocompleteSearch/ajaxSearch');?>',
            dataType: 'json',
            delay: 250,
            processResults: function(data){
                return {
                    results: data
                };
            },
            cache: true
        }
    });
</script>
</html>

All the required steps have been done, now you have to type the given below command and hit enter to run the Codeigniter app:

php spark serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8080/

I hope it will help you...