How to use autoComplete.js?

Question

I'm trying to use autoComplete.js .

I have npm installed it:

npm i @tarekraafat/autocomplete.js

Then imported it in a js file:

import autoComplete from "@tarekraafat/autocomplete.js/dist/js/autoComplete";

Also added a div with an id of autoComplete:

<input id="autoComplete" tabindex="1">    <!-- Default "id" value = "autoComplete">`

In the file where I imported the library, I copied the code that is on the website in step 4 of the how to use part .

But, I get the error:

autocompletejs.js:43 Uncaught ReferenceError: resultsListID is not defined

What am I doing wrong? I followed the steps as in the documentation but I get this error...

Any ideas on what might be the issue?

Answer 1

This error is caused, by the fact that here

resultsList: {                       // Rendered results list object      | (Optional)
        render: true,
        container: source => {
            resultsListID = "food_List";
            return resultsListID;
        },
        destination: document.querySelector("#autoComplete"),
        position: "afterend",
        element: "ul"
    },

resultsListID variable have never been initiated. It is possible to fix this byt adding var at the start of where resultsListID is assigned making something like: var resultsListID = "food_List";

resultsList: {                       // Rendered results list object      | (Optional)
        render: true,
        container: source => {
            var resultsListID = "food_List";
            return resultsListID;
        },
        destination: document.querySelector("#autoComplete"),
        position: "afterend",
        element: "ul"
    },

Noticed, that this part is optional, and if one chooses to keep it, as far as my understanding is going all results will be wrapped in the container, that has id provided in the resultsListID variable