autocomplete.js 库未显示下拉菜单

Question

我正在使用一个名为 autocomplete.js https://tarekraafat.github.io/autoComplete.js/#/?id=introduction 的 JS 库，它实际上工作了一会儿，但后来在我输入内容后它停止显示下拉菜单. 你应该可以输入一些东西，默认的食物和饮料下拉菜单应该会出现，但现在没有了。所以我知道出了什么问题。

这是我附加到的 HTML 的部分。

<!-- 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>

如果您转到我的 fiddle 并向下滚动，您会看到搜索栏，而且它也不显示占位符，这也很奇怪。 https://jsfiddle.net/apasric4/x6w4trv9/1/

我能得到什么建议吗？它很容易使用，但由于某种原因，它的行为有问题。

Answer 1

它目前在您的 fiddle 中不起作用的原因是因为 API 键未定义。第 337 行：

const source = await fetch(`https://www.food2fork.com/api/search?key=${token}&q=${query}`);

变量 token 似乎未定义，因此在应初始化自动完成时抛出错误：

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)

所以我假设在初始化自动完成之前定义 token 应该可以修复它。由于初始化失败，占位符也没有显示。

因为我在 food2fork.com 中没有订阅，所以我无法测试它。因此，我通常还建议发布每个人都可以使用的 fiddle，而无需注册第三方服务。

autocomplete.js 库未显示下拉菜单

Drop-down menu not showing with autocomplete.js library

html

javascript

css

autocomplete