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.
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 (1, 'john', 'doe', 'USA', '[email protected]', '787878787'), (2, 'kal', 'mark', 'CANADA', '[email protected]', '7887878787'), (3, 'James', 'Mary', 'USA', '[email protected]', '4364373434'), (4, 'William', 'Elizabeth', 'USA', '[email protected]', '7878787'), (5, 'Matthew', 'Betty', 'USA', '[email protected]', '898989'), (6, 'Anthony', 'Margaret', 'INDIA', '[email protected]', '8989898989'), (7, 'Donald', 'Ashley', 'CANADA', '[email protected]', '3343434345'), (8, 'Kevin', 'Carol', 'USA', '[email protected]', '2223334445');
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.
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
<?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
<?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
<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.
php spark serve
Now we will run our example using the below Url in the browser.
http://localhost:8080/student
If you liked this article, you can also download it through our Github Repository.