How to Integrate Simple & Multi Textfield jQuery UI autocomplete with Cakephp 3 Via Ajax

Posted 10:57 pm by muni & filed under Ajax, CakePHP, CSS, HTML5, JAVASCRIPT, JQUERY, MYSQL, PHP, Twitter Bootstrap.

In this series of video tutorial I am going to cover integration jQuery UI autocomplete with CakePHP 3 from scratch.

STEP 1: INSTALL CAKEPHP 3 USING COMPOSER

All modern PHP framework uses Composer to install dependent packages. So please install Composer using below tutorial in your respective Operating system.

Once you have success installed Composer successfully, Next install CakePHP 3 using Composer using following command.

composer create-project --prefer-dist cakephp/app PROJECT-NAME

STEP 2: Create CakePHP 3 Custom Layout, Pages & Adding Routing

To create custom layout design in CakePHP 3, Go to src/Template/Layout folder then add new .ctp file in it. Now Copy & paste the content default.ctp and do the necessary changes as per your need.
Next in order to use the custom layout specify custom layout name inside Controller method name like this.

<?php

namespace App\Controller;

use App\Controller\AppController;
use Cake\Datasource\ConnectionManager;
/**
 * EmployeesController
 */
class EmployeesController extends AppController
{
    /**
     * Index
     */
    public function index()
    {
        $this->viewBuilder()->layout('app');
    }
}

STEP 3: Integrate Simple jQuery UI Autocomplete With CakePHP 3

Next I have addded the bootstrap form to the single.ctp file. Also create single.js in webroot/js folder. Next included single.js file in single.ctp file.

<div class="row">
    <div class="col-sm-12 col-md-6 offset-md-3">
        <h1>Simple jQuery Autocomplete in CodeIgniter</h1>
        <form> 
            <div class="form-group">
                <label for="employee_id">Employee ID</label>
                <input type="text" class="form-control" id="employee_id" aria-describedby="employee_id" placeholder="Enter Employee ID">
            </div>
            <div class="form-group">
                <label for="first_name">First Name</label>
                <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
            </div>
            <div class="form-group">
                <label for="last_name">Last Name</label>
                <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" name="email" id="email" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="designation">Designation</label>
                <input type="text" class="form-control" name="designation" id="designation" placeholder="Designation">
            </div>
            <div class="form-group">
                <label for="department">Department</label>
                <input type="text" class="form-control" name="department" id="department" placeholder="Department">
            </div>
            <button class="btn btn-success btn-block">Submit</button>
        </form>
    </div>
</div>
<?= $this->Html->script(['single']) ?>

STEP 4: Integrate Multi Textfield jQuery UI Autocomplete with CakePHP 3 via Ajax

STEP 5: Integrate Multi Textfield jQuery UI Autocomplete with CakePHP 3 via Ajax

It’s not good practice to keep Database related queries in CakePHP controller itself. So I have created models using Cake Bake Code generation command line tool.

Next I have moved all the SQL queries in the controller to Models.