jQuery UI Autocomplete Database Search CodeIgniter 4

Share this Article
Reading Time: 6 minutes

Inside this article we will see the concept of autocomplete search using jquery ui in CodeIgniter 4. This autocomplete search will be total dynamic which searches data from database.

You will get the complete concept of jQuery UI Autocomplete Database Search CodeIgniter 4.

Learn More –

This tutorial will use a complete basic idea to learn as well as to integrate in a very easy way. This will use jquery ui which binds autocomplete data set.

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,
) 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.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.


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();

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

			$search = $postData['search'];

			$builder = $this->db->table("countries");
			// Fetch record
			$builder->like('nicename', $search, 'both');
			$query = $builder->get();
			$data = $query->getResult();
			$countries = [];

			foreach ($data as $country) {
				$countries[] = array(
					"value" => $country->id,
					"label" => $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('country', 'SearchController::index');
$routes->post('countries', 'SearchController::getCountries');


Download jQuery UI

  • Download the jQuery UI plugin from here.
  • Extract it in the public/ folder at the root.

You can also use CDN –

<!-- Script --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- jQuery UI --> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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>

    <title>Autocomplete Search From Database CodeIgniter 4 Using jQuery UI</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery UI CSS -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <!-- <link rel="stylesheet" type="text/css" href="/jquery-ui/jquery-ui.min.css"> -->

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- jQuery UI JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- <script type="text/javascript" src="/jquery-ui/jquery-ui.min.js"></script> -->


    <div class="container" style="margin-top: 40px;">
        <div class="panel panel-primary">
            <div class="panel-heading">Autocomplete Search From Database CodeIgniter 4 Using jQuery UI</div>
            <div class="panel-body">
                <label>Search Country...</label>
                <input class="form-control" id="autocomplete_country" type="text">
                <p>Country ID : <span id="countryId"></span></p>

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

                source: function(request, response) {

                    // Fetch data
                        url: "<?= site_url('countries') ?>",
                        type: 'post',
                        dataType: "json",
                        data: {
                            search: request.term
                        success: function(data) {
                select: function(event, ui) {
                    // Set selection
                    $('#autocomplete_country').val(ui.item.label); // display the selected text
                    $('#countryId').text(ui.item.value); // save selected id to input
                    return false;
                focus: function(event, ui) {
                    return false;



Application Testing

Start development server:

$ php spark serve

URL – http://localhost:8080/country

We hope this article helped you to learn about jQuery UI Autocomplete Database Search CodeIgniter 4 in a very detailed way.

Buy Me a Coffee

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