Autocomplete textbox in CodeIgniter with jQuery UI

Autocomplete helps users find or search for the value from the pre-populated values list. It provides suggestions while the user types in the input field. Basically, the autocomplete textbox is used for the search input field using jQuery UI, you can easily implement an autocomplete textbox. The jQuery UI Autocomplete plugin is an instant way to add autocomplete feature to the input text field. When we can type in the autocomplete field, this plugin starts searching for the values listed.. In this example we are going to show you how to autocomplete textbox in codeIgniter with jQuery ui 

• Setting up the Environment

• Adding jQuery UI Library

• Implementing Autocomplete

• Creating a Controller

• Creating a Model

• Creating a View

• Testing the Application

• Conclusion

Setting up the Environment

Before we need to set up our environment. you have the following steps

• CodeIgniter 3

• jQuery

• jQuery UI

Adding jQuery UI Library

utilizing jQuery UI to implement autocomplete in CodeIgniter is an excellent tool that can take your website to the next level. To get started, simply head over to the official website and download the jQuery UI library. Afterward, it's time to get your hands dirty - extract the contents of the zip file and integrate it into your CodeIgniter project directory. With jQuery UI's advanced features, your website's search box will become smarter and more efficient. In just a few simple steps

Implementing Autocomplete

First we can implement or load jquery ui plugin in html form. Jquery ui is enable the autocomplete

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

You can set specify the element ID or class name where you want to enable the autocomplete. Also, you need to define a local source to pull the data for auto-suggestions or fetch the pre-present data.

<script type='text/javascript'>

  $(document).ready(function(){

 

     $( "#firstname" ).autocomplete({

        source: function( request, response )

        {

             $.ajax({

                url: "<?php echo base_url(); ?>index.php/home/user_data",

                type: 'post',

                dataType: "json",

                data: {

                  search: request.term

                },

                success: function( data )

                {

                  response( data );

                }

             });

        },

        select: function (values, ui) {

             $('#firstname').val(ui.item.label);

             return false;

        }

     });

  });

  </script>

• Then implement to codeigniter functions.
• index() function is load the view form
• user_data() function is post the data. 
• Fetch the data from database based on search given by getUsers() model function
• Then Return the  Home data as a JSON encoded array

Create new controller

    Next, create new controller file in this path application/controllers/Home.php . Then open the controller file that will display the data and add the following code

Home.php

<?php

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

class Home extends CI_Controller {

  public function __construct(){

    parent::__construct();

    $this->load->helper('url');

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

  }

  public function index(){

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

  }

  public function user_data(){

    $postData = $this->input->post();

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

    echo json_encode($data);

  }

}

Create new model

    Next, create new model file in this path application/model/User_model.php . Then open the model file that will display the data and add the following code

User_model.php

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

class User_model extends CI_Model {

  public function getUsers($postData)

  {

      $response = array();

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

      if($postData['search'] )

      {

          $this->db->where("name like '%".$postData['search']."%' ");

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

          foreach($result as $row )

          {

              $response[] = array("label"=>$row->name);

          }

      }

      return $response;

  }

}

?>

Create new view

1. Create a textbox in your application that allows input type="text".
2. Next, create a new view file in this path "application/views/user_view.php" . Then open the view file that will display the data and add the following code

user_view.php

<!DOCTYPE html>

<html lang="en">

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

<h3>Autocomplete Textbox in CodeIgniter with jQuery UI</h3><br>

<body>

  <div class="col-5">

      <label>Full Name : </label>

<input type="text" id="firstname" name="firstname" class="form-control" placeholder="Enter Name">

  </div>

<script type='text/javascript'>

  $(document).ready(function(){

 

     $( "#firstname" ).autocomplete({

        source: function( request, response )

        {

             $.ajax({

                url: "<?php echo base_url(); ?>index.php/home/user_data",

                type: 'post',

                dataType: "json",

                data: {

                  search: request.term

                },

                success: function( data )

                {

                  response( data );

                }

             });

        },

        select: function (values, ui) {

             $('#firstname').val(ui.item.label);

             return false;

        }

     });

  });

  </script>

</body>

</html>

Finally enter your project url in browser: "http://localhost/codeigniter/index.php/home/index"

Testing the Application

Conclusion

    We hope this guide has been helpful. If you have any questions or need further assistance, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.