autocomplete with amplifyjs - jquery-ui

Question

I'm trying to use jqueryui autocmplete with amplifyjs. Thats's to be able to switch between call to real server data and some hardcoded one and for additional flexibility.
For now I do not know how to make jqueryui autocomplete call amplify to refresh itself and perform search. I have the following codesnippet:
amplify.request.define('resId', 'ajax', {
url: 'autocmpleteUrl',
dataType: "json",
type: "POST"
});
$(elementId).autocomplete({
minLength: 1,
source: 'some url',
delay: 0,
focus: function (event, ui) {
$(elementId).val(ui.item.label);
return false;
},
select: function (event, ui) {
$(elementId).val(ui.item.label);
return false;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
I know in autocomplete part it can both be url and json data. But I can't figure out how to make it deal with amplify and make it so that if user inputs text jquery autocomplete requests amplify, not the url itself. Any ideas?

Answer 1

That's close to what you want, but you've forgotten to pass the search term to your request. Your code should be:
$( elem ).autocomplete({
source: function( request, response ) {
amplify.request( "resId", request, function( data ) {
response( data );
});
});
});
Which will send the search term as the term query parameter. Since you're doing a direct passthrough of the data, this can also be reduced:
$( elem ).autocomplete({
source: function( request, response ) {
amplify.request( "resId", request, response );
});
});
However, in both of these cases you're not handling errors, which means that you can leave the autocomplete in the search state indefinitely. You should use the full amplify.request form to handle errors:
$( elem ).autocomplete({
source: function( request, response ) {
amplify.request({
resourceId: "resId",
data: request,
success: response,
error: function() {
response( [] );
}
});
});
});

Answer 2

I've completed with the following solution:
autocomplete({
source: function(request, response){
amplify.request('resId', function(data){
response(data);
});
},
So you can provide a function to jquery.ui autocomplete and in this function just set the request object and autocomplete data will be filled with data you provide.