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' => [
'Label.batch',
'Label.print_date'
],
'conditions' => [
'Label.batch LIKE' => '%' . $term . '%'
],
'group' => [
'Label.batch'
],
'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(
$data['print_date'],
'%a %d/%m/%Y',
'invalid'
)
];
}
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);
$this->set(compact('batches'));
}
// View/Label/lookup.ctp
<?php $this->Html->css('lookup/lookup', array('inline' => false)); ?>
<?php
$this->Html->script(array(
'external/jquery/jquery',
// include jquery and ui
'jquery-ui.min',
// this has the jquery initialization code
'lookup/lookup'
), 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]"
id="batch"
data-submit_url="/wms/labels/batch_lookup"
empty=""
type="text"
class="ui-autocomplete-input"
autocomplete="off">
</div>
<!-- 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');
batch.autocomplete({
source: submit_url,
minLength: 2
});
The json out put view file View/Label/batches.ctp
<?php 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/


0 Comments