Issue
I'm using a JS library called autocomplete.js https://tarekraafat.github.io/autoComplete.js/#/?id=introduction and it was actually working for a few moments, but then later it stopped showing the drop-down menu after I would type something in. You're supposed to be able to type something and the default drop-down menu of food and drinks is supposed to show up, but now it is not. So I know something is wrong.
Here is the section of HTML I attached it to.
<!-- MESSAGE USERS -->
<section class="message-users">
<h2>Message User</h2>
<input type="search" id="autoComplete">
<!-- <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
<input type="submit" value="Send"> -->
</section>
If you go to my fiddle and scroll-down you'll see the search bar and how it doesn't show the placeholder either, which is weird as well. https://jsfiddle.net/apasric4/x6w4trv9/1/
Could I get any suggestions? Its quite easy to use, but for some reason its acting glitchy.
Solution
The reason why it is currently not working in your fiddle is because the API key is not defined. In line 337:
const source = await fetch(`https://www.food2fork.com/api/search?key=${token}&q=${query}`);
The variable token
seems to be not defined and therefore an error is thrown when the autocomplete should be initialized:
Uncaught (in promise) ReferenceError: token is not defined
at Object.src ((index):702)
at Object.src (autoComplete.min.js:1)
at t.value (autoComplete.min.js:1)
at new t (autoComplete.min.js:1)
at window.onload ((index):698)
So I assume defining token
before initializing the autocomplete should fix it. Since the initialization didn't work, also the placeholder is not displayed.
Since I don't have a subscription in food2fork.com I cannot test it. Therefore I would also generally suggest posting fiddles that could be used by everybody without signing up for a third part service.
Answered By - Björn Wahle
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.