Codeigniter 4 Autocomplete From Database using Typehead JS

Codeigniter 4 autocomplete textbox from database using typehead js; In this tutorial, i will guide you step by step on how to implement textbox autocomplete from mysql database in codeigniter 4 using typehead js, bootstrap and ajax.

typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provide a rich typeahead experience.

When initializing a typeahead using the typeahead. js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query.

Codeigniter 4 autocomplete textbox from database using typehead js; I will cover following topics:

Installing and Setup Codeigniter 4 app
Integrate Typehead js with codeigniter 4 app
Integrate Bootstrap 4 with codeigniter 4 app
Implement Ajax For Autocomplete Query Search in codeigniter 4 app
Implement Search Query From Mysql DB in codeigniter 4 app

Codeigniter 4 Autocomplete From Database using Typehead JS

Let’s use the below given steps to implement autocomplete search from data in codeigniter 4 using typhead js:

Install Codeigniter 4 Application
Basic App Configurations
Create Database and Table
Setup Database Credentials
Create Controller
Create Views
Setup Routes
Start Development server

Step 1 - Install Codeigniter 4 Application

First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .

Note that, please change the download folder name “demo”.

Step 2 - Basic App Configurations

Now, you need to 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 Database and Table

Create a database and table by executing the following SQL query:

CREATE DATABASE demo;
CREATE TABLE users (
    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    email varchar(255) NOT NULL COMMENT 'Email Address',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='demo database' AUTO_INCREMENT=1;
INSERT INTO `users` (`id`, `name`, `email`) VALUES
(1, 'Paul Bettany', '[email protected]'),
(2, 'Vanya', '[email protected]'),
(3, 'Luther', '[email protected]'),
(4, 'John Doe', '[email protected]'),
(5, 'Paul Bettany', '[email protected]'),
(6, 'Vanya', '[email protected]'),
(7, 'Luther', '[email protected]'),
(8, 'Wayne Barrett', '[email protected]'),
(9, 'Vincent Ramos', '[email protected]'),
(10, 'Susan Warren', '[email protected]'),
(11, 'Jason Evans', '[email protected]'),
(12, 'Madison Simpson', '[email protected]'),
(13, 'Marvin Ortiz', '[email protected]'),
(14, 'Felecia Phillips', '[email protected]'),
(15, 'Tommy Hernandez', '[email protected]');

Step 4 - Setup Database Credentials

To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:

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,
	];

Step 5 - Create Controller

Create AutocompleteController.php file. So, visit app/Controllers directory and create AutocompleteController.php.Then add the following code into it:

<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
class AutocompleteController extends Controller {
    public function index() {
        helper(['form', 'url']);
        return view('autocomplete-search');
    }
    public function getTerm() {
        $data = [];
        $db      = \Config\Database::connect();
        $builder = $db->table('users');   
        $query = $builder->like('name', $this->request->getVar('query'))
                    ->select('name as text')
                    ->limit(10)->get();
        $data = $query->getResult();
        echo json_encode($data);
    }
}

The index() function renders the autocomplete search form db template into the view.

The getTerm() method fetch data form database table.

Step 6 - Create Views

Create autocomplete-search.php view file, so visit application/views/ directory and create autocomplete-search.php file. Then add the following HTML into autocomplete-search.php file:

<html lang="en">
<head>
    <title>Codeigniter 4 - autocomplete search using typeahead js example- laratutorials.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 - autocomplete textbox using typeahead js example- laratutorials.com</h1>
    <input class="typeahead form-control" type="text">
</div>
<script type="text/javascript">
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get('/AutocompleteController/getTerm', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
</script>
</body>
</html>

Step 7 - Setup Routes

To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:

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

Step 8 - Start Development server

Execute the following command into command prompt or terminal to start the codeigniter 4 application:

php spark serve

Then visit your web browser and hit the following url on it:

http://localhost/demo/
OR
http://localhost:8080/

Conclusion

jquery ui autocomplete in codeigniter 4 with database; In this tutorial,You have learned how to implement autocomplete search from database in codeigniter 4 using jquery ui & ajax.

Codeigniter 4 Autocomplete From Database using Typehead JS

Codeigniter 4 Autocomplete From Database using Typehead JS

Step 1 - Install Codeigniter 4 Application

Step 2 - Basic App Configurations

Step 3 - Create Database and Table

Step 4 - Setup Database Credentials

Step 5 - Create Controller

Step 6 - Create Views

Step 7 - Setup Routes

Step 8 - Start Development server

Conclusion

Recommended CodeIgniter 4 Tutorial

Leave a Comment Cancel reply