Autocomplete Textbox in CodeIgniter using Typeahead

June 4, 2018 XpertPhp Comments 0 Comment

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 Codeigniter
Step 2: Create a Database in table
Step 3: Connect to Database
Step 4: Create Controller
Step 5: Create View File

Step 1: Download and install Codeigniter
We 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 table
In 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 ;

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 Database
Go 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
);

$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 Controller
In 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);
    }
}

?>

<?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 File
So 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  - XpertPhp</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 class="container">
    <h2>Autocomplete Textbox in CodeIgniter using Typeahead </h2> 
    <input class="typeahead form-control" 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>

<head>

<title>How to Autocomplete Textbox in CodeIgniter using Typeahead - XpertPhp</title>

</head>

<body>

<h2>Autocomplete Textbox in CodeIgniter using Typeahead </h2>

</div>

$('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