21-Apr-2022
.
Admin
Hi Guys,
In this short tutorial, we will cover an autocomplete search box using typeahead in Codeigniter 4. step by step explain autocomplete search box using typeahead in codeigniter 4. we will help you to give example of autocomplete search box in codeigniter 4.
If you have a question about codeigniter 4 autocomplete textbox from database using typeahead js example then I will give a simple example with a solution. follow below step for autocompleting search box using typeahead js in codeigniter 4.
This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.
Step 1: Install Codeigniter 4
This is optional; however, if you have not created the codeigniter app, then you maygo ahead and execute the below command:
composer create-project codeigniter4/appstarter ci-news
Step 2 : Basic Configurations
So, we will now set the basic configuration on the app/config/app.php file, so let’s implement to application/config/config.php and open this file on text editor.
app/config/app.php
public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/example/';
Step 3 : Database Configurations
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, 'Bhavesh'),
(2, 'Vishal'),
(3, 'Nikhil'),
(4, 'Diego'),
(5, 'Klaus'),
(6, 'Ben'),
(7, 'Handler'),
(8, 'Dexter'),
(9, 'Mask'),
(10, 'Aladin');
Step 4 : Database Configurations
application/config/database.php
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 Controller
In this step,you will create to AutocompleteSearch in app/Controllers folder.
app/Controllers/AutocompleteSearch.php
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
use CodeIgniter\HTTP\RequestInterface;
class AutocompleteSearch extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index() {
return view('home');
}
/**
* Write code on Method
*
* @return response()
*/
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: Define Route
We have to engender a route that renders the table into the view, place the following code in app/Config/Routes.php file.
app/Config/Routes.php
$routes->get('/', 'AutocompleteSearch::index');
Step 7: Create View
we have to create a home.php file that we will use to convert HTML to PDF. Place the following code inside the application/views/home.php file.
<html lang="en">
<head>
<title>Codeigniter 4 - jquery ajax autocomplete search using typeahead example- Nicesnippets.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- Nicesnippets.com</h1>
<input class="typeahead form-control" type="text">
</div>
<script type="text/javascript">
/*------------------------------------------
--------------------------------------------
Autocomplete Search
--------------------------------------------
--------------------------------------------*/
$('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 8 : Run Codeigniter App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Codeigniter app:
php spark serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:8080/
It will help you...
#Codeigniter 4
