Token not defined error

[gokite7]

.

[TarekRaafat]

Hello @apasric4,

First of all, I'll assume you're using a proper data source instead of the one in JSFiddle because this one is dummy and not working.

Secondly, I guess the results list could be hidden, so try adding the below to your css file and let me know how it went.

#autoComplete_results_list {
   display: block;
   bottom: -120px;
   right: 433px;
}

[kanine]

When trying your sample code using an API the 'query' is not being passed into the fetch...

const source = await fetch(https://site.test/api?q=${query});

Uncaught (in promise) ReferenceError: query is not defined

That's a working endpoint, but as soon as it no longer throws the following error once the query variable is removed. So how should the query element be passed in to the src: object.

Note: the backticks are getting stripped from my post.

[TarekRaafat]

Hello @kanine,

The ${query} in the sample code was referring to below defined variable that reads from input field the users typed value.

// User search query
const query = document.querySelector("#autoComplete").value;

So the entire data method block looks like this

  data: {
    src: async () => {
      // Loading placeholder text
      document.querySelector("#autoComplete").setAttribute("placeholder", "Loading...");
      // API key token
      const token = "this is the API token number";
      // User search query
      const query = document.querySelector("#autoComplete").value;
      // Fetch External Data Source
      const source = await fetch(`https://www.site.test/api/search?key=${token}&q=${query}`);
      const data = await source.json();
      // Post loading placeholder text
      document.querySelector("#autoComplete").setAttribute("placeholder", "Food & Drinks");
      // Return Fetched data
      return data.recipes;
    },

Please try it and let me know how it went.

Cheers! :)

[kanine]

Thanks, that's what I had ended up doing anyway so all good. I just thought there may have been another object reference I should have been using.