autoComplete.js-未定義如何解決autoComplete

Question

我想在我的應用程序中使用autocomplete.js 。

我已經使用yarn add @tarekraafat/autocomplete.js安裝了軟件包。 我正在使用webpack 4.28捆綁javascript文件，並具有require("@tarekraafat/autocomplete.js/dist/js/autoComplete"); 將包導入到應用程序中，並將捆綁文件放在關閉BODY標記之前的底部。

在我的custom.js文件中，我正在創建一個新的autoComplete實例，如下所示：

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);
  }
});

但是，在運行該應用程序時，出現錯誤Uncaught ReferenceError: autoComplete is not defined使用對我創建新實例的位置的引用Uncaught ReferenceError: autoComplete is not defined 。

我已經閱讀了入門文檔，並查看了演示代碼，但無法弄清缺少的內容。 我該如何解決錯誤？

Answer 1

在里面寫你的代碼

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

Answer 2

您的問題出在您的導入中，您沒有正確導入自動完成功能，因此在使用new autoComplete時會遇到錯誤。

更改require("@tarekraafat/autocomplete.js/dist/js/autoComplete"); import autoComplete from '@tarekraafat/autocomplete.js'; ，將其放在文件頂部，緊接在jQuery之類的內容之后