jQuery UI Autocomplete With Json Not Showing Suggestions - jquery-ui

Question

I'm experiencing some troubles with an autocomplete component from jQueryUi. The list with autocomplete suggestions doesn't appear.
I've tested the following code (from jQuery UI) and, despite servlet is sending a JSON object and "data" variable is storying it, component is still not showing suggestions list.
Also I tried the component with a simple list as source (like here), and it worked fine.
Have you any idea on what would be happening?
<script>
$(function() {
var cache = {};
$( "#bear" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.getJSON( "/animals/MaintainMamals?operation=14", request, function( data, status, xhr ) {
cache[ term ] = data;
response( data );
});
}
});
});
</script>
<form>
<div class="ui-widget">
<label for="bear">Bear name (type a piece of name): </label>
<input id="bear" name="bear" class="text ui-widget-content ui-corner-all"/>
</div>
</form>
Json object used in testing (I tried the stuff with a simple jSon built with just a String refering to "name" property, with the same [bad] results):
[
{
"id": 1234567,
"name": "Yogi Bear",
"activity": {
"handler": {
"interfaces": [
{}
],
"constructed": true,
"persistentClass": {},
"getIdentifierMethod": {
"clazz": {},
"slot": 2,
"name": "getCod",
"returnType": {},
"parameterTypes": [],
"exceptionTypes": [],
"modifiers": 1,
"root": {
"clazz": {},
"slot": 2,
"name": "getId",
"returnType": {},
"parameterTypes": [],
"exceptionTypes": [],
"modifiers": 1,
"override": false
},
"override": false
},
"setIdentifierMethod": {
"clazz": {},
"slot": 3,
"name": "setId",
"returnType": {},
"parameterTypes": [
{}
],
"exceptionTypes": [],
"modifiers": 1,
"root": {
"clazz": {},
"slot": 3,
"name": "setId",
"returnType": {},
"parameterTypes": [
{}
],
"exceptionTypes": [],
"modifiers": 1,
"override": false
},
"override": false
},
"overridesEquals": false,
"entityName": "com.zoo.Activity",
"id": 7105,
"initialized": false,
"readOnly": false,
"unwrap": false
}
}
}
]

Answer 1

The autocomplete widget expects each item in your array to have a label property, a value property, or both. Since your data does not have either, you can either:
Tweak your server-side data source to return items that meet that criteria, or
Transform the data from your server-side code to match the criteria after you make the request.
I can only provide an answer to #2 since I don't see your server-side code, so here's how you would do that:
$(function() {
var cache = {};
$( "#bear" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if (term in cache) {
response(cache[ term ]);
return;
}
$.getJSON("/animals/MaintainMamals?operation=14", request, function (data, status, xhr) {
/* Add a `label` property to each item */
$.each(data, function (_, item) {
item.label = item.name;
});
cache[term] = data;
response(data);
});
}
});
});
Here's an example that fakes an AJAX request--other than that it should be similar to your situation.