Your example should work with the exception of the ui.synopsis
object calls. The jQueryUI ui
object that is passed in actually doesn't refer to the result array item directly. Rather you have to use ui.item
to access the original result item:
$("#autocomplete").autocomplete({
delay: 500,
minLength: 3,
source: processed,
focus: function (event, ui) {
event.preventDefault();
$('#search_results').text(ui.item.synopsis);
},
select: function (event, ui) {
event.preventDefault();
}
});
In the above example, I've removed the AJAX
call completely and used the hard-coded response that you had supplied earlier. However the data manipulation/setup is still following the same logic as what you have above.
FIDDLE EXAMPLE: http://jsfiddle.net/Sta5N/