Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos
Codeigniter 4 Autocomplete Textbox using Typeahead JS

Codeigniter 4 Autocomplete Textbox using Typeahead JS

Posted on September 1, 2021September 26, 2021 By XpertPhp

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
(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.

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.

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

Recommended Posts:

  • How to do form validation in codeigniter
  • How to Implement Google Pie Chart using Codeigniter
  • how to integration paypal payment gateway in codeigniter
  • CodeIgniter 4 jQuery Form Validation Example Tutorial
  • Codeigniter 4 CRUD Operation With Ajax Example
Codeigniter Tags:Codeigniter 4 Tutorial

Post navigation

Previous Post: Codeigniter 4 Watermark Image Example Tutorial
Next Post: Codeigniter 4 Select2 Ajax Autocomplete Search Example

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tricks jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch Laravel Socialite laravel social login nodejs pagination payment gateway php with mysql react js tutorial rewrite rule send mail validation wysiwyg editor

Latest Posts

  • How to Convert Date and Time from one timezone to another in php
  • how to get current date and time in php
  • Drag and Drop Reorder Items with jQuery, PHP & MySQL
  • Laravel 9 Toastr Notifications Example Tutorial
  • Laravel 9 CRUD Operation Example Using Google Firebase
  • Laravel 9 CKeditor Image Upload With Example
  • Laravel 9 Summernote Image Upload With Example
  • Laravel 9 Stripe Payment Gateway Integrate Example
  • How To Send Email Using Mailtrap In Laravel 9
  • Laravel 9 Fullcalendar Ajax Example Tutorial

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Age Calculator Online
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Copyright © 2018 - 2022,

All Rights Reserved Powered by XpertPhp.com