Autocomplete Textbox in CodeIgniter using Typeahead – onlinecode
In this post we will give you information about Autocomplete Textbox in CodeIgniter using Typeahead – onlinecode. Hear we will give you detail about Autocomplete Textbox in CodeIgniter using Typeahead – onlinecodeAnd how to use it also give you demo for it if it is necessary.
In this article, We will explain how to Autocomplete Textbox in CodeIgniter using Typeahead. We can easily make Autocomplete Textbox using Typeahead in CodeIgniter Framework.
so, you can follow the below steps.
Overview
Step 1: Download and install CodeigniterStep 2: Create a Database in tableStep 3: Connect to DatabaseStep 4: Create ControllerStep 5: Create View File
Step 1: Download and install CodeigniterWe are going to install Codeigniter 3, first, we will download a fresh Codeigniter 3 version and install it in our system. so you can follow below Link for Download CodeIgniter.
Step 2: Create a Database in tableIn this step, we have to create a table in the database, so we will create a database using the below code.
CREATE TABLE IF NOT EXISTS 'users' (
'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=15 ;Step 3: Connect to DatabaseGo to the config folder and open database.php file some changes in this file like hostname, database username, database password, and database name.
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'enter here database name', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
Step 4: Create ControllerIn this step, we will create a Ci_autocomplete.php file in the “application/controller” directory and paste the below code in this controller.application/controller/Ci_autocomplete.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Ci_autocomplete extends CI_Controller {
/**
* Constructor of Controller
*
* @return Response
*/
public function __construct() {
parent::__construct();
$this->load->database();
}
public function index()
{
$this->load->view('autocomplete');
}
public function search()
{
$query = $this->input->get('query');
$this->db->like('first_name', $query);
$data_result = $this->db->get("users")->result();
$data = array();
foreach ($data_result as $row)
{
$data[] = $row->first_name;
}
echo json_encode($data);
}
}
?>Step 5: Create View FileSo finally, we will create the autocomplete.php file in the “application/views/” directory.application/views/autocomplete.php
<html lang="en">
<head>
<title>How to Autocomplete Textbox in CodeIgniter using Typeahead - onlinecode</title>
<link rel="stylesheet" href="//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 >
<h2>Autocomplete Textbox in CodeIgniter using Typeahead </h2>
<input type="text">
</div>
<script type="text/javascript">
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('<?php echo base_url(); ?>ci_autocomplete/search', { query: query }, function (data) {
data = $.parseJSON(data);
return process(data);
});
}
});
</script>
</body>
</html>We think would you like this article, so you can click on the “Show Demo” button and you can see this demo article.
Show Demo
Hope this code and post will helped you for implement Autocomplete Textbox in CodeIgniter using Typeahead – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs