CodeIgniter 4 Load Data using jQuery AJAX in Select2

Share this Article
Reading Time: 6 minutes
549 Views

Inside this article we will use the concept of select2 jquery plugin to load dynamic data using ajax in CodeIgniter 4.

select2 is a jquery plugin which alters HTML element and create dynamic element with ajax data. This tutorial will cover all easy steps to integrate and implement this functionality.

Learn More –

We will see the concept of CodeIgniter 4 load data using jquery Ajax in select2.

Note*: For this article, CodeIgniter v4.1 setup has been installed. May be when you are seeing, version will be updated. CodeIgniter 4.x still is in development mode.

Let’s get started.


Download & Install CodeIgniter 4 Setup

We need to download & install CodeIgniter 4 application setup to system. To set application we have multiple options to proceed.

Here are the following ways to download and install CodeIgniter 4 –

  • Manual Download
  • Composer Installation
  • Clone Github repository of CodeIgniter 4

Complete introduction of CodeIgniter 4 basics – Click here to go. After going through this article you can easily download & install setup.

Here is the command to install via composer –

$ composer create-project codeigniter4/appstarter codeigniter-4

Assuming you have successfully installed application into your local system.


Turn Development Mode On

When we install CodeIgniter 4, we have env file at root. To use the environment variables means using variables at global scope we need to do env to .env

Open project in terminal

$ cp env .env

Above command will create a copy of env file to .env file. Now we are ready to use environment variables.

CodeIgniter starts up in production mode by default. Let’s do it in development mode. So that while working if we get any error then error will show up.

# CI_ENVIRONMENT = production

// Do it to 

CI_ENVIRONMENT = development

Now application is in development mode.


Create Database & Table in Application

To create a database, either we can create via Manual tool of PhpMyadmin or by means of a mysql command.

CREATE DATABASE codeigniter4_app;

Next, we need a table. That table will be responsible to store data.

CREATE TABLE `countries` (
 `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
 `iso` char(2) COLLATE utf8mb4_unicode_ci NOT NULL,
 `name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
 `nicename` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL,
 `iso3` char(3) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `numcode` smallint(6) DEFAULT NULL,
 `phonecode` int(11) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Successfully, we have created a database and a table.


Database Connectivity to Application

Open .env file from project root. Search for DATABASE. You should see the connection environment variables.

Let’s set the value for those to connect with database.

 
#--------------------------------------------------------------------
# DATABASE
#-------------------------------------------------------------------- 
 database.default.hostname = localhost
 database.default.database = codeigniter4_app
 database.default.username = root
 database.default.password = root
 database.default.DBDriver = MySQLi
   

Now, database successfully connected with application.


Insert Data into Table

As we have created a table named as countries. We need some data into this table to test autocomplete search.

For data here we have the link of github.

Run the given mysql query to your database from this github link.

When you will run, you will get data something like this.


Create Controller

Back to terminal and run this command to create controller file.

$ php spark make:controller Search --suffix

It will create SearchController.php file inside /app/Controllers folder.

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class SearchController extends BaseController
{
	public function __construct()
	{
		$this->db = db_connect();
	}

	public function index()
	{
		return view('search');
	}

	public function getCountries()
	{
		$request = service('request');
		$postData = $request->getPost();

		$response = array();

		$data = array();

		$builder = $this->db->table("countries");

		$countries = [];

		if (isset($postData['query'])) {

			$query = $postData['query'];

			// Fetch record
			$builder->select('*');
			$builder->like('nicename', $query, 'both');
			$query = $builder->get();
			$data = $query->getResult();
		} else {

			// Fetch record
			$builder->select('*');
			$query = $builder->get();
			$data = $query->getResult();
		}

		foreach ($data as $country) {
			$countries[] = array(
				"id" => $country->id,
				"text" => $country->nicename,
			);
		}

		$response['data'] = $countries;

		return $this->response->setJSON($response);
	}
}

Add Routes

Open Routes.php file from /app/Config folder. Add these given routes into it.

//..

$routes->get('data', 'SearchController::index');
$routes->post('countries', 'SearchController::getCountries');

//..

Download Select2 CDN

  • Download the select2 plugin from here.
  • Extract it in the public/ folder at the root.
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Create Layout File

Create search.php file inside /app/Views folder.

Open search.php and write this complete code into it.

<!DOCTYPE html>
<html>

<head>

    <title>How to Load data using jQuery AJAX in Select2 – CodeIgniter 4</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery -->
    <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-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>

<body>

    <div class="container" style="margin-top: 40px;">
        <div class="panel panel-primary">
            <div class="panel-heading">CodeIgniter 4 Load Data using jQuery AJAX in Select2</div>
            <div class="panel-body">
                <p>
                    <label>Select Country</label>
                </p>
                <select name="dd_country" id="dd_country" class="form-group">
                    <option value='0'>-- Select country --</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Script -->
    <script type='text/javascript'>
        $(document).ready(function() {

            // Initialize select2
            $("#dd_country").select2({
                ajax: {
                    url: "<?= site_url('countries') ?>",
                    type: "post",
                    delay: 250,
                    dataType: 'json',
                    data: function(params) {
                        return {
                            query: params.term, // search term
                        };
                    },
                    processResults: function(response) {
                        return {
                            results: response.data
                        };
                    },
                    cache: true
                }
            });

        });
    </script>

</body>

</html>

Application Testing

Start development server:

$ php spark serve

URL – http://localhost:8080/data

We hope this article helped you to learn about CodeIgniter 4 load data using jquery Ajax in select2 in a very detailed way.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Find More on CodeIgniter 4 here

Leave a Comment