autocomplete not accepting the json object for source

Question

Below is the jsp page tag for input text element:

<input name="searchTextSpan" id="searchTextSpan" type="text"/>

below is the ajax call that loads on dcument.ready:

AUI().use("liferay-portlet-url", function(A) {
    var resourceURL = Liferay.PortletURL.createResourceURL();
    resourceURL.setPortletId("app_war_portlet");
    resourceURL.setResourceId(resourceId);
    require(["dojo/request", "dijit/registry", "dojo/on", "dojo/domReady!"], function(request){
          request.post(resourceURL.toString(), {
              query: ajaxData,
              handleAs: "json"
          }).then(function(data){
              if(resourceId == 'inputTextClick'){
                  AUI().use("liferay-portlet-url", function(A) {
                        var resourceURL =   Liferay.PortletURL.createResourceURL();
                            resourceURL.setPortletId("app_war_portlet");
                        if(data.cachetmpArr!=null && data.cachetmpArr.length>0){
                            var cacheList = JSON.stringify(data.cachetmpArr);
                            cacheList = cacheList.replace(/"/g, "'");
                            console.log('cacheList12 '+cacheList);//['106182233','206182233','306182233'];
                                     $('#searchTextSpan').autocomplete({
                                                width: 300,
                                                max: 10,
                                                delay: 100,
                                                minLength: 1,
                                                autoFocus: true,
                                                cacheLength: 1,
                                                scroll: true,
                                                highlight: false,
                                                source:cacheList,
                                             }).focus(function(){
                                             $(this).autocomplete("search", "");
                                             });
                        }
                  });

              }

          });
    })
})

the source attribute is not accepting the cacheList it throws 404 url error. can you please suggest

Answer 1

You need to parse JSON before you pass it to autocomplete.

Like this:

$('#searchTextSpan').autocomplete({                                               


 width: 300,
    max: 10,
    delay: 100,
    minLength: 1,
    autoFocus: true,
    cacheLength: 1,
    scroll: true,
    highlight: false,
    source:JSON.parse(cacheList), // parse JSON response
    }).focus(function(){
    $(this).autocomplete("search", "");
});