autocomplete.js 库未显示下拉菜单

Question

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

这是我附加到的 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>

如果你转到我的小提琴并向下滚动，你会看到搜索栏，并且它也不显示占位符，这也很奇怪。

我可以获得任何建议吗？它很容易使用，但由于某种原因它的表现有点问题。

Answer 1

它目前无法在您的小提琴中工作的原因是因为 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 的订阅，所以我无法测试它。因此，我通常还建议发布可供每个人使用的小提琴，而无需注册第三方服务。