Autocomplete Search Box using Typeahead in Codeigniter 4

Bootstrap typehead js allows users to make autocomplete text search box from database. In this tutorial, you will learn how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Search Text box using Typeahead in Codeigniter 4

Let’s follow the following steps to implement autocomplete textbox from database using Typehead js in CodeIgniter 4 apps:

Step 1: Setup Codeigniter Project
Step 2: Basic Configurations
Step 3: Create a Table in the Database
Step 4: Setup Database Credentials
Step 5: Create a Controller
Step 6: Create a View
Step 7: Define Routes
Step 8: Start Development Server

Step 1: Setup Codeigniter Project

In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next, you will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';

Step 3: Create a Table in the Database

Use the following SQL queries to create table and insert data into it:

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

Step 4: Setup Database Credentials

Edit app/Config/Database.php file and add database details in it:

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'demo',
		'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 a Controller

Go to app/Controllers and create a controller name AutocompleteSearch.php, and add the following methods into it to handle autocomplete search from database:

<?php namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class AutocompleteSearch extends Controller
{
    public function index() {
        return view('home');
    }
    
    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);
    }
}

Step 6: Create a View

Create one view files name home.php and update the following code into your file:

<html lang="en">
<head>
    <title>Codeigniter 4 - jquery ajax autocomplete search using typeahead example- Tutsmake.com</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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>  
</head>
<body>
<div class="container">
    <h1>Codeigniter 4 - jquery ajax autocomplete search using typeahead example- Tutsmake.com</h1>
    <input class="typeahead form-control" type="text">
</div>
<script type="text/javascript">
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get('/AutocompleteSearch/ajaxSearch', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
</script>
</body>
</html>

Step 7: Define Routes

Define a route that renders the table into the view, place the following code in app/Config/Routes.php file.

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

Step 8: Start Development Server

Run the following command to start development server:

php spark serve

Now use the following URL on browser:

http://localhost:8080

Conclusion

That’s it, In this tutorial you have successfully learned how to make autocomplete search using typeahead js in codeigniter 4.

Subscribe to Blog via Email