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