You can use below code to use autocomplete + AJAX + AUI :

https://stat.duke.edu/~cc248/jsphylosvg/js/yui/tests/autocomplete/tests/manual/autocomplete.html
http://alloyui.com/versions/1.5.x/tutorials/autocomplete/
http://www.codeyouneed.com/aui-autocomplete-service-builder-json/
http://yuilibrary.com/yui/docs/autocomplete/ac-geocode.html
AUI().use('autocomplete-list','aui-base','aui-io-request','autocomplete-filters','autocomplete-highlighters',function (A) {
var tempVar;
var auto = new A.AutoCompleteList({
allowBrowserAutocomplete: false,
activateFirstItem: true,
inputNode: '#<portlet:namespace />firstName',
resultTextLocator:'name',
resultHighlighter: 'charMatch',
resultFilters:['charMatch'],
minQueryLength: 5,
queryDelay: 300,
source:function(){
var firstName = A.one("#<portlet:namespace />firstName").get('value');
var url = '<%=resourceURL%>&firstName ='+firstName;
var myAjaxRequest=A.io.request(url,{
dataType: 'json',
method:'GET',
autoLoad:false,
sync:true,
on: {
success:function(){
tempVar=this.get('responseData');
}
}
});
myAjaxRequest.start();
if (tempVar!=null){
return JSON.parse(tempVar);
}
},
});
auto.render();
});
Note: Here you can use resultFilters as 'charMatch', 'phraseMatch', 'startsWith', 'subWordMatch', 'wordMatch'
Most important thing over here is, you should have sync:true if you are making ajax call then only it will work proper.
Some Useful links:https://stat.duke.edu/~cc248/jsphylosvg/js/yui/tests/autocomplete/tests/manual/autocomplete.html
http://alloyui.com/versions/1.5.x/tutorials/autocomplete/
http://www.codeyouneed.com/aui-autocomplete-service-builder-json/
http://yuilibrary.com/yui/docs/autocomplete/ac-geocode.html





