Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead

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 full functional demo to view autosuggest search functionality and also can download demo.

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

    
    
    
    
?>

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

/*
 * 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.

/*
 * 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

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


    

        
Autocomplete Search with Dynamic Data using CodeIgniter and Bootstrap Typeahead
                 
    



    
        
         Back To Tutorial                
    



    

        
    

 

    
    

        

            

                
            
        
    


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

Demo  [sociallocker] Download[/sociallocker]