How to Autocomplete textbox in CodeIgniter 3 with jQuery UI

An Autocomplete textbox gives suggestions based on user input.

The user can select an option from the list.

This generally uses in the field where a user needs to select an item from the available data.

In this tutorial, I show how you can add autocomplete on a textbox element using jQuery UI in CodeIgniter.

Table structure
Configuration
Model
Controller
View
Demo
Conclusion

1. Table structure

In this example, I am using users table and added some records –

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(60) NOT NULL,
  `fullname` varchar(70) NOT NULL,
  `password` varchar(60) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Configuration

Navigate to application/config/database.php and define Database connection.

$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root', // Username
 'password' => '', // Password
 'database' => 'tutorial', // 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
);

Default controller

Open application/config/routes.php and edit default_controller value to User.

$route['default_controller'] = 'User';

Load Database

To access the MySQL database require loading database library.

Open application/config/autoload.php and add the database in libraries array().

$autoload['libraries'] = array("database");

3. Model

Create a User_model.php file in application/models/ folder.

Here, create a method –

getUsers() – If search is POST then fetch all records from users table according to $postData['search'].

Loop on the fetched records and initialize $response with value and label key.

Return the $response Array.

Completed Code

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

class User_model extends CI_Model {

  function getUsers($postData){

     $response = array();

     if(isset($postData['search']) ){
       // Select record
       $this->db->select('*');
       $this->db->where("username like '%".$postData['search']."%' ");

       $records = $this->db->get('users')->result();

       foreach($records as $row ){
          $response[] = array("value"=>$row->id,"label"=>$row->username);
       }

     }

     return $response;
  }

}

4. Controller

Create a User.php file in application/controllers/ folder.

Here, create 3 methods –

__construct() – Load url helper and User_model Model.
index() – Load user_view view.
userList() – This method is use to handle AJAX request and return response.

Read the POST values and pass in $this->User_model->getUsers() to get user records.

Return response in JSON format.

Completed Code

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

class User extends CI_Controller {

  public function __construct(){

    parent::__construct();
    $this->load->helper('url');

    // Load model
    $this->load->model('User_model');

  }

  public function index(){

    // load view
    $this->load->view('user_view');
  }

  public function userList(){
    // POST data
    $postData = $this->input->post();

    // Get data
    $data = $this->User_model->getUsers($postData);

    echo json_encode($data);
  }

}

5. View

Create user_view.php file in application/views/ folder.

Included jQuery UI CSS, JS, and jQuery library.

Create two text elements –

To initialize jQuery UI autocomplete.
Display selected user id.

Script –

Initialize autocomplete on #autouser selector.

Use the source option to load the suggestion list.

Send AJAX POST request to "<?=base_url()?>index.php/User/userList" and pass the input value in the text element.

On successful callback pass response data in response() function.

Using the select option to get the selected suggestion label and value.

Pass ui.item.label in #autouser selector and ui.item.value in #userid selector.

Completed Code

<!doctype html>
<html>
  <head>
    <title>How to Autocomplete textbox in CodeIgniter 3 with jQuery UI</title>

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

    Search User : <input type="text" id="autouser">

    <br><br>
    Selected user id : <input type="text" id="userid" value='0' >

    <!-- Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type='text/javascript'>
    $(document).ready(function(){

     // Initialize 
     $( "#autouser" ).autocomplete({
        source: function( request, response ) {
          // Fetch data
          $.ajax({
            url: "<?=base_url()?>index.php/User/userList",
            type: 'post',
            dataType: "json",
            data: {
              search: request.term
            },
            success: function( data ) {
              response( data );
            }
          });
        },
        select: function (event, ui) {
          // Set selection
          $('#autouser').val(ui.item.label); // display the selected text
          $('#userid').val(ui.item.value); // save selected id to input
          return false;
        }
      });

    });
    </script>
  </body>
</html>

6. Demo

View Demo

7. Conclusion

Use source option to send AJAX request to the controller and load suggestion data.

Return response must have value and label keys.

You can view this tutorial to know how you can add jQuery UI autocomplete in CodeIgniter 4.

If you found this tutorial helpful then don't forget to share.

Contents

1. Table structure

2. Configuration

3. Model

4. Controller

5. View

6. Demo

7. Conclusion