Published Apr 10,2019 by Kailash Singh
Autocomplete textbox in CodeIgniter with jQuery UI

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

Be First to Comment

Leave a Reply