javascript - 将 typeahead.js 与 Bloodhound.md 和外部 json 结合使用

Question

我尝试使用typeahead.js与 bloodhound.md和外部 json 数据源。我想我会尽可能准确地遵循 github 上提供的文档和示例。但是，我未能实现所需的下拉菜单。

你能告诉我，我做错了什么吗？

[编辑]
我把整个代码(js和json)移到了jsbin，所以跨域调用应该不会有任何问题。

在此处查找示例代码: http://jsbin.com/vajamixubo/1/edit?html,js,output

我也将不胜感激有关如何有效调试 typeahead.js 调用的提示。

Answer 1

关于您的示例，您缺少对 Typeahead 和 Bloodhound 库的引用。将以下内容添加到您的 HTML 中:

<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>

现在，预先输入控件可以工作，但当您搜索建议结果时，它会将建议结果显示为“未定义”。这是因为你的显示键不正确，应该是:

displayKey: 'genre'

可以找到工作示例 here .

最后，为了在浏览器中轻松调试 JavaScript，请添加:

debugger;

到你的代码(例如尝试将其放在你的 JavaScript 的开头)。如果您打开浏览器控制台，脚本执行将在这些调试语句处停止。

或者，在您的示例中，打开浏览器控制台，单击“源”选项卡，然后导航到“(无域)/vajamixubo.js”。这是由 jsbin 执行的 javascript，您可以在此处放置断点。