autoComplete.js - how to resolve autoComplete is not defined
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?
javascript autocomplete
asked yesterday
kagundajm
5811822
add a comment |
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?
javascript autocomplete
asked yesterday
kagundajm
5811822
You are importing thecustom.jsafter the bundle? Try to useimport 'autocomplete.js'orimport 'path/to/your/node_modules/autocomplete.js'. It's seems a problem when you import the autocomplete.js, so maybe it's a path problem or import order
– Ian Welerson
yesterday
Yes I am importing after 'autoComplete'.
– kagundajm
yesterday
add a comment |
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?
javascript autocomplete
asked yesterday
kagundajm
5811822
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?
javascript autocomplete
javascript autocomplete
asked yesterday
kagundajm
5811822
asked yesterday
kagundajm
5811822
asked yesterday
kagundajm
5811822
asked yesterday
kagundajm
5811822
asked yesterday
kagundajm
5811822
5811822
You are importing thecustom.jsafter the bundle? Try to useimport 'autocomplete.js'orimport 'path/to/your/node_modules/autocomplete.js'. It's seems a problem when you import the autocomplete.js, so maybe it's a path problem or import order
– Ian Welerson
yesterday
Yes I am importing after 'autoComplete'.
– kagundajm
yesterday
add a comment |
You are importing thecustom.jsafter the bundle? Try to useimport 'autocomplete.js'orimport 'path/to/your/node_modules/autocomplete.js'. It's seems a problem when you import the autocomplete.js, so maybe it's a path problem or import order
– Ian Welerson
yesterday
Yes I am importing after 'autoComplete'.
– kagundajm
yesterday
You are importing the
custom.js after the bundle? Try to use import 'autocomplete.js' or import 'path/to/your/node_modules/autocomplete.js'. It's seems a problem when you import the autocomplete.js, so maybe it's a path problem or import order– Ian Welerson
yesterday
You are importing the
custom.js after the bundle? Try to use import 'autocomplete.js' or import 'path/to/your/node_modules/autocomplete.js'. It's seems a problem when you import the autocomplete.js, so maybe it's a path problem or import order– Ian Welerson
yesterday
Yes I am importing after 'autoComplete'.
– kagundajm
yesterday
Yes I am importing after 'autoComplete'.
– kagundajm
yesterday
add a comment |
2 Answers
2
active
oldest
votes
Write your code inside
$(document).ready(function(){
// Write your Code Here
});
answered yesterday
Vikram
597511
add a comment |
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
answered yesterday
Ian Welerson
1085
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944500%2fautocomplete-js-how-to-resolve-autocomplete-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Write your code inside
$(document).ready(function(){
// Write your Code Here
});
answered yesterday
Vikram
597511
add a comment |
Write your code inside
$(document).ready(function(){
// Write your Code Here
});
answered yesterday
Vikram
597511
add a comment |
Write your code inside
$(document).ready(function(){
// Write your Code Here
});
answered yesterday
Vikram
597511
Write your code inside
$(document).ready(function(){
// Write your Code Here
});
answered yesterday
Vikram
597511
answered yesterday
Vikram
597511
answered yesterday
Vikram
597511
answered yesterday
Vikram
597511
597511
add a comment |
add a comment |
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
answered yesterday
Ian Welerson
1085
add a comment |
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
answered yesterday
Ian Welerson
1085
add a comment |
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
answered yesterday
Ian Welerson
1085
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
answered yesterday
Ian Welerson
1085
answered yesterday
Ian Welerson
1085
answered yesterday
Ian Welerson
1085
answered yesterday
Ian Welerson
1085
1085
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53944500%2fautocomplete-js-how-to-resolve-autocomplete-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You are importing the
custom.jsafter the bundle? Try to useimport 'autocomplete.js'orimport 'path/to/your/node_modules/autocomplete.js'. It's seems a problem when you import the autocomplete.js, so maybe it's a path problem or import order– Ian Welerson
yesterday
Yes I am importing after 'autoComplete'.
– kagundajm
yesterday