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.
Recommended CodeIgniter 4 Tutorial
- How to Install / Download Codeigniter 4 By Manual, Composer, Git
- How to Remove Public and Index.php From URL in Codeigniter 4
- Codeigniter 4 – Form Validation Example Tutorial
- How to add jQuery Validation on Form in Codeigniter 4 Example
- Codeigniter 4 Ajax Form Submit Validation Example
- Codeigniter 4 File Upload Validation Example
- Image Upload with Validation in Codeigniter 4
- Codeigniter 4 Image Upload Preview Using jQuery Example
- Codeigniter 4 Ajax Image Upload Preview Example
- How to Upload Multiple Images in Codeigniter 4
- Codeigniter 4 Multiple Image Upload with Preview
- Codeigniter 4 Pagination Example; Create Pagination in Codeigniter
- Simple Codeigniter 4 CRUD with Bootstrap and MySQL Example
- Codeigniter 4 CRUD with Datatables Example
- Codeigniter 4 Image Crop and Save using Croppie Example
- Dependent Dropdown using jQuery Ajax in Codeigniter 4
- CodeIgniter 4 Rest Api CRUD Example
- Codeigniter 4 Login Registration and Logout Example
- Get Address from Latitude and Longitude in Codeigniter 4
- Codeigniter 4 Google Column Charts Example
- Google Pie Chart in Codeigniter 4
- Codeigniter 4 Ajax Load More Data on Page Scroll