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

Posted by & 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.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!