In this article, we will explain to you how to create autocomple texbox using typeahead js in CodeIgniter 4(Codeigniter 4 Autocomplete Textbox using Typeahead JS). We can easily make Autocomplete Textbox using Typeahead in CodeIgniter 4 application.
In this example, we use the typeahead js library for autocomplete search from the database in Codeigniter 4. so you can see our following example.
Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller and Model
Step 6: Create Views Files
Step 7: Run The Application
Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.
Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url
Step 3: Create a Database in table
In this step, We will create the database and table.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
CREATE TABLE IF NOT EXISTS `students` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(64) NOT NULL, `last_name` varchar(64) NOT NULL, `address` text NOT NULL, `email` varchar(64) NOT NULL, `mobile` varchar(12) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1; INSERT INTO `students` (`id`, `first_name`, `last_name`, `address`, `email`, `mobile`) VALUES |
Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public $default = [ 'DSN' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'codeigniter4_pagination', '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 and Model
In this step, we will create the “Student.php” controller and the “StudentModel.php” model.
app/Controllers/Student.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php namespace App\Controllers; use CodeIgniter\Controller; use App\Models\StudentModel; class Student extends Controller { public function __construct() { helper(['form', 'url']); } public function index() { return view('list'); } function ajaxSearch(){ $model = new StudentModel(); $query=$model->like('first_name',$_REQUEST['query']) ->select('id, first_name') ->limit(10)->get(); $data_result = $query->getResult(); $data = array(); foreach ($data_result as $row) { $data[] = $row->first_name; } echo json_encode($data); } } ?> |
app/Models/StudentModel.php
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php namespace App\Models; use CodeIgniter\Database\ConnectionInterface; use CodeIgniter\Model; class StudentModel extends Model { protected $table = 'Students'; protected $allowedFields = ['first_name','last_name','address','email', 'mobile']; } ?> |
Step 6: Create Views Files
Finally, we will create the list.php in the app/views directory.
app/views/list.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html lang="en"> <head> <title>Codeigniter 4 Autocomplete Textbox using Typeahead JS - XpertPhp</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="//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</h1> <input class="typeahead form-control" type="text"> </div> <script type="text/javascript"> $('input.typeahead').typeahead({ source: function (query, process) { return $.get('<?php echo site_url(); ?>student/ajaxSearch', { query: query }, function (data) { console.log(data); data = $.parseJSON(data); return process(data); }); } }); </script> </body> </html> |
Step 7: Run The Application
We can start the server and run the codeigniter 4 application using the below command.
|
1 |
php spark serve |
Now we will run our example using the below Url in the browser.
|
1 |
http://localhost:8080/student |
If you liked this article, you can also download it through our Github Repository.
