Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead

TechArise Team

5 years ago

In this tutorial, We will learn how to autocomplete search with dynamic data using CodeIgniter and bootstrap typeahead input. I use jQuery AJAX to call the PHP, MySQL script to read the data from the database and autocomplete dynamically. We will use a MySQL database for the country list. We have provided a full functional demo to view autosuggest search functionality and also can download the demo.

Step 1: First we will include bootstrap, jQuery and Typehead files into head section.

<?php
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
?>

<?php

Step 2: Create a model file

Create a model file named “Site.php” inside “application/models” folder.

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * @package Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *   
 * Description of Site Controller
 */

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Site extends CI_Model {
    private $_countryID;
    private $_countryName;

    // set country id
    public function setCountryID($countryID) {
        return $this->_countryID = $countryID;
    }
    // set country Name
    public function setCountryName($countryName) {
        return $this->_countryName = $countryName;
    }
    // get All Countries
    public function getAllCountries() {
        $this->db->select(array('c.id as country_id', 'c.name as country_name'));
        $this->db->from('countries as c');
        $this->db->like('c.name', $this->_countryName, 'both');
        $query = $this->db->get();
        return $query->result_array();
    }

}

?>

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

/**

* @package Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead

* @author TechArise Team

* @email info@techarise.com

* Description of Site Controller

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Site extends CI_Model {

private $_countryID;

private $_countryName;

// set country id

public function setCountryID($countryID) {

return $this->_countryID = $countryID;

}

// set country Name

public function setCountryName($countryName) {

return $this->_countryName = $countryName;

}

// get All Countries

public function getAllCountries() {

$this->db->select(array('c.id as country_id', 'c.name as country_name'));

$this->db->from('countries as c');

$this->db->like('c.name', $this->_countryName, 'both');

$query = $this->db->get();

return $query->result_array();

}

Step 3: Create a controller file

Next create a controller file named “Location.php” inside “application/controllers” folder.

<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of Location Controller FrontEnd
 *
 * @author Jaeeme
 */
if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Location extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->model('Site', 'location');
    }

    // get state names
    public function index() {
        $data['page'] = 'Autocomplete';
        $data['title'] = 'Autocomplete | TechArise'; 
        $this->load->view('autocomplete/index', $data);
    }

    // get Country Autocomplete
    public function getCountryAutocomplete() {
        $json = array();
        $countryName = $this->input->post('query');
        $this->location->setCountryName($countryName);
        $geCountries = $this->location->getAllCountries();
        foreach ($geCountries as $key => $element) {
            $json[] = array(
                'country_id' => $element['country_id'], 
                'country_name' => $element['country_name'],
            );
        }
        $this->output->set_header('Content-Type: application/json');
        echo json_encode($json);
    }

}
?>

<?php

* To change this license header, choose License Headers in Project Properties.

* To change this template file, choose Tools | Templates

* and open the template in the editor.

/**

* Description of Location Controller FrontEnd

* @author Jaeeme

if (!defined('BASEPATH'))

exit('No direct script access allowed');

class Location extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Site', 'location');

}

// get state names

public function index() {

$data['page'] = 'Autocomplete';

$data['title'] = 'Autocomplete | TechArise';

$this->load->view('autocomplete/index', $data);

}

// get Country Autocomplete

public function getCountryAutocomplete() {

$json = array();

$countryName = $this->input->post('query');

$this->location->setCountryName($countryName);

$geCountries = $this->location->getAllCountries();

foreach ($geCountries as $key => $element) {

$json[] = array(

'country_id' => $element['country_id'],

'country_name' => $element['country_name'],

);

}

$this->output->set_header('Content-Type: application/json');

echo json_encode($json);

}

Step 4: Create a view file

Create a view file named “index.php” inside “application/views/autocomplete folder.

<?php
$this->load->view('templates/header');
?>
<script src="<?php echo HTTP_JS_PATH; ?>typeahead.js"></script>
<div class="row">
    <div class="col-lg-12">
        <h2>Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead</h2>                 
    </div>
</div>

<div class="row">
    <div class="col-lg-12">        
        <a href="#" class="pull-right btn btn-info btn-xs" style="margin: 2px;"><i class="fa fa-mail-reply"></i> Back To Tutorial</a>                
    </div>
</div>
<br>
<div class="row">
    <div class="col-lg-12">
        <span id="success-msg"></span>
    </div>
</div>
 <form class="dynamic-autocomplete-frm" id="dynamic-dependent-frm">
    <input type="hidden" name="autocomplete" id="field-autocomplete">
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                <input type="text" name="add_autocomplete" class="form-control" id="add-autocomplete" placeholder="Enter Country Name">
            </div>
        </div>
    </div>

</form>
<?php
$this->load->view('templates/footer');
?>

<?php

$this->load->view('templates/header');

<h2>Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead</h2>

</div>

<a href="#" class="pull-right btn btn-info btn-xs" style="margin: 2px;"><i class="fa fa-mail-reply"></i> Back To Tutorial</a>

</div>

<br>

</div>

</div>

</form>

<?php

$this->load->view('templates/footer');

Step 5: Create a js file

Create a view file named “custom.js inside “assets/js” folder

    // autocomplete functionality
    if (jQuery('input#add-autocomplete').length > 0) {
        jQuery('input#add-autocomplete').typeahead({
          displayText: function(item) {
               return item.country_name
          },
          afterSelect: function(item) {
                this.$element[0].value = item.country_name;
                jQuery("input#field-autocomplete").val(item.country_id);
          },
          source: function (query, process) {
            jQuery.ajax({
                    url: baseurl + "location/getCountryAutocomplete",
                    data: {query:query},
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        process(data)
                    }
                })
          }   
        });
    }

// autocomplete functionality

if (jQuery('input#add-autocomplete').length > 0) {

jQuery('input#add-autocomplete').typeahead({

displayText: function(item) {

return item.country_name

afterSelect: function(item) {

this.$element[0].value = item.country_name;

jQuery("input#field-autocomplete").val(item.country_id);

source: function (query, process) {

jQuery.ajax({

url: baseurl + "location/getCountryAutocomplete",

data: {query:query},

dataType: "json",

type: "POST",

success: function (data) {

process(data)

}

})

}

});

}

Demo Download