Я хочу использовать autocomplete.js в своем приложении.
Я установил пакет с помощью yarn add @tarekraafat/autocomplete.js. Я использую webpack 4.28 для объединения файлов javascript и имею require("@tarekraafat/autocomplete.js/dist/js/autoComplete"); для импорта пакета в приложение и помещаю связанный файл внизу перед закрывающим тегом BODY.
В моем файле custom.js я создаю новый экземпляр автозаполнения следующим образом:
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.info(feedback);
}
});
Однако при запуске приложения я получаю сообщение об ошибке Uncaught ReferenceError: autoComplete is not defined со ссылкой на место, где я создаю новый экземпляр.
Я прочитал документацию по началу работы, посмотрел демонстрационный код и не могу понять, что мне не хватает. Как мне исправить ошибку?
Да, я импортирую после автозаполнения.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Напишите свой код внутри
$(document).ready(function(){
// Write your Code Here
});
Ваша проблема заключается в импорте, вы неправильно импортируете автозаполнение, поэтому при использовании new autoComplete возникает ошибка.
Измените require("@tarekraafat/autocomplete.js/dist/js/autoComplete"); на import autoComplete from '@tarekraafat/autocomplete.js';, поместите это поверх своего файла сразу после jquery или чего-то еще
Вы импортируете
custom.jsпосле бандла? Попробуйте использоватьimport 'autocomplete.js'илиimport 'path/to/your/node_modules/autocomplete.js'. Это кажется проблемой при импорте autocomplete.js, так что, возможно, это проблема пути или порядка импорта