Autocomplete textbox in CodeIgniter with jQuery UI

Autocomplete textbox in CodeIgniter with jQuery UI

Published Apr 10,2019 by Kailash Singh

0 Comment     3749 Views    

In this tutorial, we are going to learn about how to create Autocomplete textbox in CodeIgniter with jQuery UI.

Step 1 :- Create userdata table in database.

CREATE TABLE `utube`.`userdata` ( `id` INT(11) NOT NULL AUTO_INCREMENT , `fullname` VARCHAR(200) NOT NULL , PRIMARY KEY (`id`)) ENGINE = InnoDB;

Step 2 :- Add links in view page (welcome.php)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Step 3 :- Add Form view in view page (welcome.php)

<h3>Autocomplete textbox in CodeIgniter with jQuery UI</h3><br>
<label>Full Name : </label>
<input type="text" id="fullname" class="form-control" placeholder="Enter Name">

Step 4 :- Add JQuery code  in view page (welcome.php)

<script type='text/javascript'>
  $(document).ready(function(){
  
     $( "#fullname" ).autocomplete({
        source: function( request, response ) 
        {
             $.ajax({
                url: "<?php echo base_url(); ?>welcome/userdata",
                type: 'post',
                dataType: "json",
                data: {
                  search: request.term
                },
                success: function( data ) 
                {
                  response( data );
                }
             });
        },
        select: function (values, ui) {
             $('#fullname').val(ui.item.label);
             return false;
        }
     });

  });
  </script>

Step 5 :-  Create Controller and add this code (Welcome.php)

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

  public function __construct(){
    parent::__construct();
    $this->load->helper('url');
    $this->load->model('Welcome_model');
  }

  public function index(){
    $this->load->view('welcome');
  }

  public function userdata(){
    $postData = $this->input->post();
    $data = $this->Welcome_model->getUsers($postData);
    echo json_encode($data);
  }

}

Step 6 :-  Create Model and add this code (Welcome_model .php)

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

class Welcome_model extends CI_Model {

  public function getUsers($postData)
  {
      $response = array();

      $this->db->select('*');

      if($postData['search'] )
      {
          $this->db->where("fullname like '%".$postData['search']."%' ");
          $result = $this->db->get('userdata')->result();

          foreach($result as $row )
          {
              $response[] = array("label"=>$row->fullname);
          }
      }

      return $response;
  }

}

Hope this will help our developers.

Because we believe Mantra means CodingMantra