Using JQuery UI Autocomplete in Cakephp 2.0 - jquery-ui

Question

I'm having trouble implementing JQuery UI Autocomplete in CakePHP 2.0. Want to display a list of Items on a Grocery list view to allow users to select an item already in the database instead of creating a new one.
Application Jquery:
////file:app/webroot/js/application.js
$(document).ready(function(){
// Caching the Item textbox:
var item = $('#item');
// Defining a placeholder text:
item.defaultText('Search for items');
// Using jQuery UI's autocomplete widget:
item.autocomplete({
minLength: 1,
source: 'http://localhost/groceries/groclists/search'
////**part of the problem was here, needs to be full source**
});
});
// A custom jQuery method for placeholder text:
$.fn.defaultText = function(value){
var element = this.eq(0);
element.data('defaultText',value);
element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).blur(function(){
if(element.val() == '' || element.val() == value){
element.addClass('defaultText').val(value);
}
});
return element.blur();
}
Item form in View:
<div class="items form">
<?php echo $this->Form->create('Item', array('action' => 'search')); ?>
<?php echo $this->Form->input('item', array('type' => 'text', 'id' => 'item', 'label' => 'Search')); ?>
<?php echo $this->Form->end(__('Submit', true)); ?>
</div>
Items Controller Search():
public function search() {
if ($this->RequestHandler->isAjax()) {
Configure::write('debug', 0);
$this->autoRender = false;
$query = $_GET['term'];
$searchitems = $this->Item->find('all', array(
'conditions' => array('Item.name LIKE' => '%' . $query . '%')));
$i = 0;
foreach ($searchitems as $searchitem) {
$response[$i]['value'] = $searchitem['Item']['name'];
$response[$i]['label'] = $searchitem['Item']['id'];
$i++;
}
echo json_encode($response);
} else {
if (!empty($this->data)) {
$this->set('items', $this->paginate(array('Item.name LIKE' => '%' . $this->data['Item']['name'] . '%')));
}
}
}
I'm at a loss, any input welcome.
After making the above change to the Application.js I'm now getting a response into my webpage. It has the correct number of results based off of what is included in the database at the moment, however it's a null response. From Firebug the response is as follows:
[{"value":null,"label":null},{"value":null,"label":null},{"value":null,"label":null},{"value":null,"label":null}]
Here are my Response Headers:
Response Headers
Date Sun, 18 Sep 2011 14:48:37 GMT
Server Apache/2.2.11 (Win32) PHP/5.3.0
X-Powered-By PHP/5.3.0
Content-Length 113
Keep-Alive timeout=5, max=100
Connection Keep-Alive
Content-Type text/html; charset=UTF-8
Request Headers
Host localhost
User-Agent Mozilla/5.0 (Windows NT 6.1; rv:6.0.2) Gecko/20100101 Firefox/6.0.2
Accept application/json, text/javascript, */*; q=0.01
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection keep-alive
X-Requested-With XMLHttpRequest
Referer http://localhost/groceries/groclists/view/3
Cookie CAKEPHP=hu7ksthrlfms0lqod3rdq296f5

Answer 1

I'm not particularly clear about what you're asking, but here's the Javascript I've used to do this in CakePHP 1.2 and 1.3:
$.ajax({
url: '/api/v1/zip_codes/utilities/' + zip + '/' + type + '.json',
type: 'GET',
dataType: 'json',
success: function( data, status ) {
var utility_type = data.Type.name;
var $provider_name = $('#Building' + utility_type + 'ProviderName');
var $provider_id = $('#Building' + utility_type + 'ProviderId');
// Massage the Cake data into something autocomplete-friendly
var $friendly = $.map( data.Utilities, function( util ) {
return { label: util.Utility.name, value: util.Utility.id };
});
// If more than one, populate the provider autocomplete options
$provider_name.autocomplete({
source: $friendly, // use the autocomplete-friendly data
minLength: 0,
focus: function( event, ui ) {
$provider_name.val( ui.item.label );
return false;
},
select: function( event, ui ) {
$provider_name.val( ui.item.label );
$provider_id.val( ui.item.value );
return false;
}
}).data( 'autocomplete' )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( '<a>' + item.label + '</a>' )
.appendTo( ul );
};
});
This snippet retrieves the name and ID of utility companies operating in a given zip code (just to provide a little context). For more information, a question I asked about this same issue may help.