JSON object for source is not being accepted by the autocomplete feature

Here is the JSP page tag for an input text element:

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

Below is the AJAX call that loads on document.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 in the code above is causing a 404 URL error when attempting to accept the cacheList. Any suggestions on how to fix this?

Answer №1

Before utilizing the autocomplete function, make sure to first properly parse the JSON data.

Here is an example:

$('#searchTextSpan').autocomplete({                                               


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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular: Issue with click() event not functioning properly once dynamic HTML is rendered

There are a few HTML elements being loaded from the server side, and an Angular click() event is also included. However, the event is not firing after the elements are rendered. It is understood that the DOM needs to be notified, but this cannot be done. ...

Is it recommended to implement client-side fetching upon component mounting following the utilization of getServerSideProps?

After implementing getServerSideProps in Next.js, I'm beginning to question the necessity of client-side fetching. If the data is already pre-rendered, is it redundant to fetch it again on component render? I'm unsure about the best approach for ...

403 Error: CSRF token is invalid - Node.js Express with csurf

I've exhausted all resources available on this topic, both here and through Google searches, but I'm still unable to resolve this issue. I am using Node, Express, EJS, and attempting to implement csurf for a form submission via jQuery ajax. No ma ...

Retrieve the jquery.data() of an element stored in an HTML file using JavaScript or jQuery

I have a dilemma with storing HTML in a database for later retrieval. Imagine the HTML being a simple div, like this: <div id="mydiv">This is my div</div> To store related information about the div, I use jQuery.data() in this manner ...

ng-view scope interacting with parent scope connection

Excuse the late-night desperation, but I have a question about my AngularJS application that uses ngRoute. Currently, everything is being handled in one controller. The issue arises with a form in a view where I need to take the input field data and store ...

Adjusting Header Size While Scrolling in Angular

Looking for assistance with AngularJS regarding handling events (specifically scrolling). I am trying to dynamically change the size of the header based on whether the user scrolls up or down. Below is a snippet of JavaScript code that achieves this effect ...

displaying large datasets on server-side using jQuery DataTables

I am currently utilizing DataTables 1.9.4 along with several plugins (ColVis, ColReorderWithResize, and ColumnFiltering). The parameters configured for server-side communication include: "bServerSide" "fnServerData" "sAjaxSource" Say I need to present 3 ...

Issues with JQuery scroll() / scrollTop() functionality in Internet Explorer and Firefox

Our current script showcases a dotted line starting from the top of the screen leading to an up arrow. The position of the arrow changes based on how far the user has scrolled down the page, allowing them to click on the arrow and scroll back to the top. W ...

Angular's Innovative 3D-esque Carousel Rotation

My goal is to design a pseudo-3d carousel with 5 items, like the example below (and have them rotate around): https://i.sstatic.net/FtcSe.png I came across this fantastic stackblitz as a base, and I've been tinkering with it for hours attempting to ...

CSS: Strategies for eliminating empty cells within a grid layout by filtering out rows that contain partial or incomplete content

I am in need of creating a grid layout where each div is a specific width, and the number of rows depends on how many items there are. The twist is that I am unsure of the width of the outer container. My initial solution was to use CSS grid: #container ...

Struggling to adjust the timeout to exceed 60 seconds

I have been attempting to set a timeout for 120 seconds or more, but no matter what I try, the requests are timing out after only 60 seconds. Things I have tried include: $.ajax({ url: URL, timeout: 120000, success: function(html){ co ...

How can I extract a nested object by matching a specific string?

activePath will be updated dynamically based on an API call. How can we retrieve an object from a nested object that matches the activePath string? Here are some path examples: Drug/GetRefills. In this case, it should push data.Drug.getRefills. If the pat ...

A guide on how to apply filtering to an array in Vue using another array

Currently, I have two arrays of objects: one is named submodules and it contains a children array within it. My goal is to filter these children arrays based on another array called accessed. new Vue({ data: { submodules: [ { type: ...

What is the best way to print HTML code without having to write it multiple times?

I am working at a web application and i am doing some refactoring. Doing so, anyway, i was caught in a dilemma: i have some similar nor identical parts in my pages that i want to compress in just one in order to make some edits just once, since edits are ...

Error Encountered: Internet Explorer 11 Runtime Issue

Recently, I encountered an issue with my code that had been working perfectly fine in IE7 and IE8, but started giving me a runtime error in IE11. The error message stated: "JavaScript runtime error: 'SelectAllCheckboxes' is undefined" Below is t ...

Ways to make all elements appear darker with the exception of one specific element

I am currently developing a Google Chrome extension and working on the right side, specifically in my friend's stories section. I am looking for a particular friend's story by searching for their name entered in the input field after clicking the ...

Cutting Out Sections of a List

I'm currently working on an app that involves looking up and navigating to specific locations. I've encountered an issue with the coordinates in my code containing a ',0' at the end, which is not compatible with Google Maps. Manually re ...

Once the node modules folder has been received, proceed with installing npm packages

Hello, my name is Jaffer Syed and I'm currently facing a challenge in installing npm packages into my code. Specifically, I am trying to install the num2fraction package from https://www.npmjs.com/package/num2fraction. However, despite watching your n ...

Chaining multiple ajax calls in jQuery is a powerful technique that allows you

I am looking to execute a series of N ajax requests without causing the browser to freeze, and I intend to utilize the jquery deferred object for this purpose. Below is a sample scenario involving three requests, but in reality, my program might need to h ...

Utilizing React SSR to dynamically import components based on API response

I am currently working on a SSR React app using the razzle tool, with the server running on the express framework. My goal is to dynamically load React components based on the value included in an API response. My folder structure looks like this: views ...