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 = batch.data('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: http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/


Submit a Comment

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

You May Also Like…

Meraki Open Source Licenses

Until today I assumed that Meraki was built in-house with only closed source software. But having a look at the...


If you have Veeam backup failing with the Updating BCD failed with Cannot update SafeBoot flag and SentinelOne is...