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>

如果转到我的小提琴并向下滚动，您将看到搜索栏以及它也不显示占位符，这也很奇怪。 https://jsfiddle.net/apasric4/x6w4trv9/1/

我可以得到任何建议吗？它非常易于使用，但由于某种原因其表现出故障。

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上没有订阅，因此无法对其进行测试。因此，我通常也建议发布小提琴，供所有人使用，而无需注册第三方服务。

下拉菜单未与autocomplete.js库一起显示

1 个答案: