07 July, 2015

Autocomplete + AJAX + AlloyUI

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


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

Rate Me:

0 Discussion: