javascript - bootstrap typeahead 显示没有结果

Question

我正在尝试对我的电子邮件字段使用预先输入，因此当管理员搜索电子邮件地址时，会向他们显示选项。非常基本。我的源代码是从 php BE 加载的，它从 mysql 收集数据。

所以我有一个输入标签:

<input type="text" name="userEmail" id="email" value="" class="form-control" />

在我的文档准备功能中，我有:

$('#email').typeahead({
    ajax: {
        triggerLength: 3,
        url: '/user/findBootstrap'
    },
    display: 'email'
});

当我输入:“gbo”时，我的 php BE 返回一个与此类似的 json:

[{"id":"94","email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2542474a4c5157655640575340570b464a48" rel="noreferrer noopener nofollow">[email protected]</a>"},{"id":"142","email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8afaaa7bcb1b888bbbca1a6afbaa9b1e5a5bdbba1abe6aba7a5" rel="noreferrer noopener nofollow">[email protected]</a>"},{"id":"193","email":"<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bebbb6a0bab1acb299aabcabafbcabf7bab6b4" rel="noreferrer noopener nofollow">[email protected]</a>"}]

我通过查看控制台确认我收到了数据。无论我输入什么，Typeahead 都不会显示任何选项。该库加载正常(状态 200)并且我没有收到任何 JS 错误

Answer 1

我发现了问题。我今天刚下载，请参阅发布日期。与 documentation page 上的指定相反更改您要查找的参数名称的参数不是“display”而是“displayField”。

他们可能与他们的文档不同步......

希望这篇文章能够帮助其他人不要在这方面浪费时间......

所以这是我的例子中应该使用的正确语法:

$('#email').typeahead({
    ajax: {
        triggerLength: 3,
        url: '/user/findBootstrap'
    },
    displayField: 'email' // NOT "display"!!!!!
});