Typeahead js与Bloodhound- this.source不是一个函数

Question

我正在遵循这个示例使用Bloodhound实现typeahead.js，但是我遇到了一个JavaScript错误。我缺少什么？

HTML: (.net razor视图)

@Scripts.Render(Links.Scripts.typeahead_bundle_js) 
@Styles.Render(Links.Content.typeahead_min_css)
<input id="myInput" type="text" class="form-control" />

JS：

$(function () {
    var data = ["abce", "abcd", 'def', 'abcdef'];
    var bh = new Bloodhound({
        local: data,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        datumTokenizer: Bloodhound.tokenizers.whitespace
    });
    //bh.initialize(); //this wasn't in the example, adding it had no effect

    $('#myInput').typeahead({
        highlight:true
    },
    {
        name: "testData",
        source: bh
    });
});

在 typeahead.bundle.js 中出现错误：

this.source 不是一个函数

（注意：保留了原文中的HTML标签）

- DLeh

Answer 1

这也困扰着我，因为和你一样，我按照示例做了每一步... 我花了一些时间检查了我所使用的库的确切版本，并将其与示例中的版本进行了比较。我使用的是'twitter-typeahead-rails'宝石包中打包的typeahead.js 0.10.5版本，在示例中使用的版本是typeahead.js 0.11.1。

一旦我切换到该版本，一切都开始正常工作了。甚至不需要重新映射字符串数组为对象数组或在源上调用ttAdapter。你的代码可能也会按照你发布的方式工作...

---

引自twitter-typeahead changelog版本0.11.0:

...此版本有许多API更改，因此请不要期望与以前版本具有向后兼容性。还引入了许多未记录的新功能。在v1发布之前，将添加这些功能的文档...

- bosskovic

---

注意：由于版本仍为0.11.1，因此此内容仍适用于2018年。另外，如果您正在使用Nuget，则版本为0.10.1-因此请从其网站获取最新版本。 - chakeda

Answer 2

您需要使用source: bh.ttAdapter()而不是source: bh

- glittershark

---

这让我有了一半的进展，但所有的结果都只是显示“未定义”，你有什么想法吗？ - DLeh

我通常的做法是在调用“typeahead”时使用“displayKey”选项，但这仅适用于引用对象键。也许你可以将你的“data”数组变成一个带有“value”属性的对象数组，并传递一个“displayKey: 'value'”给“typeahead”。 - glittershark

我尝试过但没有成功，您介意在答案中张贴一个完整的示例吗？ - DLeh

你可以通过以下方式将数据转换为对象数组：data = data.map(function(_, i){ return {'value': data[i]}; }); - Dhiraj

我认为两个回答都很好，但是正如@bosskovic所建议的那样，版本1.11.0有其他的bug，可以在这里看到，因此我保留了1.10.5版本并使用了这个回答来解决我的问题。 - pictoru

我正在使用版本0.11.1。我能够在我的两个表单控件上使用typeahead。然而，我无法在第三个控件上使用它（所有三个控件都在同一页上）。这些输入的typeahead来源基于ajax。请参见http://imgur.com/a/WyqIK。您可以看到add-enquiry.php：404和423行。第404行的数据运行良好，但第423行的数据不行。这非常奇怪！ - Yogesh Mistry