autoComplete.js - how to resolve autoComplete is not defined

Question

I want to use autocomplete.js in my application.

I have installed the package using yarn add @tarekraafat/autocomplete.js . I am using webpack 4.28 to bundle the javascript files and have require("@tarekraafat/autocomplete.js/dist/js/autoComplete"); to import the package into the application and placed the bundled file at the bottom before the closing BODY tag.

In my custom.js file, I am creating a new instance of autoComplete as follows:

new autoComplete({
  data: {
    src: async () => {
      document.querySelector("#autoComplete_results_list").style.display = "none";
      document.querySelector("#autoComplete").setAttribute("placeholder", "Loading...");
      const source = await fetch("/employee/search");
      const data = await source.json();
      return data;
    },
    key: "name"
  },
  selector: "#autoComplete",
  placeHolder: "type employee name to search...",
  threshold: 0,
  searchEngine: "strict",
  highlight: true,
  dataAttribute: { tag: "value", value: "" },
  maxResults: Infinity,
  renderResults: {
    destination: document.querySelector("#autoComplete"),
    position: "afterend"
  },
  onSelection: feedback => {
    document.querySelector(".selection").innerHTML = feedback.selection.food;
    document
      .querySelector("#autoComplete")
      .setAttribute("placeholder", `${event.target.closest(".autoComplete_result").id}`);
    console.log(feedback);
  }
});

However, on running the application, I am getting an error Uncaught ReferenceError: autoComplete is not defined with a reference to the location where I am creating the new instance.

I have read the getting started documentation and looked at the demo code and I can't figure out what I am missing. How do I resolve the error?

Answer 1

Write your code inside

$(document).ready(function(){
  // Write your Code Here 
});

Answer 2

Your problem is in your import, you are not import the autoComplete correctly, so when you using the new autoComplete you are having error.

Change the require("@tarekraafat/autocomplete.js/dist/js/autoComplete"); to import autoComplete from '@tarekraafat/autocomplete.js'; , put this on top of your file, right after jquery or something