CakePHP & jQuery UI Autocomplete

Written by James McDonald

July 20, 2015

This is a field that you enter a partial “batch” number and then the JQuery Autocomplete control queries the remote database for a matching list.


This is rough code to get a jQuery UI auto complete control working with CakePHP.

// in Model/Label.php

     public function batch_lookup($term) {

        $options = [
            'fields' => [
            'conditions' => [
                'Label.batch LIKE' => '%' . $term . '%'
            'group' => [
            'recursive' => -1

        $batches = $this->find('all', $options);

        $batches = Hash::map($batches, '{n}.Label', [ $this, 'fmt_batch']);
        return $batches;

    public function fmt_batch($data) {

        return [
            'value' => $data['batch'],
            'label' => $data['batch'] . " - " 
            . CakeTime::format(
                    '%a %d/%m/%Y', 

In the Controller

// In Controller/LabelsController.php

    public function batch_lookup() {

        Configure::write('debug', 0);
        $this->layout = 'ajax';
        $this->view = '/Labels/batches';
        $search_term = $this->request->query['term'];

        $batches = $this->Label->batch_lookup($search_term);



// View/Label/lookup.ctp

<?php $this->Html->css('lookup/lookup', array('inline' => false)); ?>

    // include jquery and ui
    // this has the jquery initialization code
        ), array(
    'inline' => false,
    'block' => 'script_bottom'
<?php echo $this->Form->create('Lookup', array('url' => array('controller' => 'labels', 'action' => 'lookup_search'))); ?>

<legend><?php echo __('Search Conditions'); ?></legend>
<?php echo $this->Form->input('batch', array(
        'id' => 'batch',
        'data-submit_url' => $this->base . '/' . $this->params['controller'] . '/batch_lookup',
        'type' => 'text',
        'div' => array('class' => 'form-cell'))); ?> 
<?php echo $this->Form->end(__('Search'), array('class' => 'form-cell')); ?>


The HTML of the input looks like this:


<!-- the input looks like this when 
     rendered as HTML -->
    <div class="form-cell">
        <label for="batch">Batch</label>
        <input name="data[Lookup][batch]" 

<!-- the data-submit_url element allows you to dynamically specify 
     the autocomplete lookup url -->


    // jquery code wrap this in a $(document).ready(function(){})
    // block
    batch = $("#batch"); 
    submit_url = batch.attr('data-submit_url');
    // actually you can access the information using
    submit_url ='submit_url');
            source: submit_url,
            minLength: 2

The json out put view file View/Label/batches.ctp

echo json_encode($batches);

I am using the Hash::map CakePHP function to modify the returned data so that I can have the correct JSON output but this link has a nice write up on how to reformat your JSON using JQuery.

Shear brilliance:


Submit a Comment

Your email address will not be published. Required fields are marked *

You May Also Like…

Toggen builds a new website

So I have built and hosted a new website for Roger Clark Pest Management they are a family owned and operated Pest...


Just downloaded WizTree (not a sponsor) from It seems to do what it says on the tin which is...

Scam call from “Telstra”

Just had a call from a man with a sub-continental accent from caller ID 0734946596 Told me there was problem with my...