public
Last active

Typeahead with id

  • Download Gist
typeahead_with_id.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
/*
* CakePHP Twitter Bootstrap Typeahead with id
* ProjectsController.php
* <?php $this->set('projects', $this->Project->find('list'); $this->render('list', 'ajax'); ?>
* /app/View/Projects/list.ctp
* <?php echo json_encode($projects); ?>
* data = {'id': 'item name', ..};
* /app/View/Tasks/index.ctp
* <input type="hidden" id="TaskProjectId" name="data[Task][project_id]"/>
* <input autocomplete="off" data-provide="typeahead" class="typeahead" type="search" id="TaskProject">
*/
 
var finished = true;
$('#TaskProject').typeahead({
source: function(query, process){
if(!finished) {
return;
}
finished = false;
$.getJSON('/projects/names/'+query,{}, function(response){
var data = new Array();
for(var i in response) {
data.push(i+'_'+response[i]);
}
process(data);
finished = true;
});
},
highlighter: function(item) {
var parts = item.split('_');
parts.shift();
return parts.join('_');
},
updater: function(item) {
var parts = item.split('_');
$('#TaskProjectId').val(parts.shift());
return parts.join('_');
},
minLength: 0
});

Thank you for sharing this. I found it useful.

you put : <?php $this->set('projects', $this->Project->find('list'); $this->render('list', 'ajax'); ?> inside ProjectsController function names() ???

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.