Codeigniter jQuery UI AJAX Autocomplete Search From Database Tutorial

jQuery UI allows users to implement autocomplete searches from databases using AJAX in Codeigniter projects.

In this tutorial, we would love to share step-by-step how to use jQuery ui to create autocomplete search from the database in the CodeIgniter project using AJAX.

Codeigniter jQuery ui Autocomplete Search with Ajax

Here are steps:

Download Codeigniter Latest
Basic Configurations
Create Table for Autocomplete
Setup Database Credentials
Create Controller File
Create View File
Test This Project

Download Codeigniter Project

Click Download Codeigniter, and download the fresh setup of CodeIgniter, and unzip the setup in your local system xampp/htdocs/.

Setup Base URL

Edit application/config/config.php and add the base URL in it:

$config['base_url'] = 'http://localhost/demo';

Create a Table for Autocomplete

Run this SQL query to create a table in the database for autocomplete search:

CREATE TABLE IF NOT EXISTS users(
    id int(10) unsigned NOT NULL AUTO_INCREMENT,
     name varchar(255) COLLATE utf8_unicode_ci NOT NULL,
     email varchar(255) COLLATE utf8_unicode_ci NOT NULL, 
    PRIMARY KEY (id)
  ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

Setup Database Credentials

Edit database.php file from application/config/, and add database details in it:

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

Create Controller File

Create an Ajax.php file in the application/controller folder and create methods in it to handle the autocomplete search functionality from the database:

<?php
class Ajax extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->helper('url_helper');
        $this->load->helper('form');
        $this->load->database();
    }
    public function autocomplete(){
     $this->load->view('jquery-ui-autocomplete');
    }
    public function search(){
        $term = $this->input->get('term');
        $this->db->like('name', $term);
        $data = $this->db->get("users")->result();
        echo json_encode( $data);
    }

}

Create View File

Create a views file in application/views/ to allow users to use autocomplete search from the database:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Auto Complete Search Using Jquery UI - Tutsmake.com</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   }
 </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12"><h2>Codeigniter 3 Auto Complete Search Using Jquery UI</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="search" name="search" type="text" class="form-control" placeholder="Search" />
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  var BASE_URL = "<?php echo base_url(); ?>";
 $(document).ready(function() {
    $( "#search" ).autocomplete({
        source: function(request, response) {
            $.ajax({
            url: BASE_URL + "ajax/search",
            data: {
                    term : request.term
             },
            dataType: "json",
            success: function(data){
               var resp = $.map(data,function(obj){
                    return obj.name;
               });
               response(resp);
            }
        });
    },
    minLength: 1
 });
});
</script>
</body>
</html>

Test This Project

Go to browser and use on below given URL in it for testing:

http://localhost/demo/ajax/autocomplete

Conclusion

In this tutorial, we have successfully created autocomplete search from database using jQuery ui library,

Live Demo

Rrecommended Posts

Codeigniter Load Data While Scrolling Page with Ajax

Learn Remove index.php in web url using .htaccess file Codeigniter

How to Install Codeigniter Using Composer

If you have any questions or thoughts to share, use the comment form below to reach us.

Subscribe to Blog via Email