带有 Bloodhound 的 Typeahead js - this.source 不是函数答案

【问题标题】：Typeahead js with Bloodhound- this.source is not a function带有 Bloodhound 的 Typeahead js - this.source 不是函数
【发布时间】：2015-08-03 08:10:44
【问题描述】：

我正在关注this example for typeahead.js 使用Bloodhound 到T，但我收到了一个javascript 错误。我错过了什么？

HTML：（.net 剃须刀视图）

@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 不是函数

【问题讨论】：

标签： javascript typeahead.js bloodhound

【解决方案1】：

这个也给我带来了困难，因为和你一样，我按照示例中的字母做所有事情......我花了一段时间检查我使用的 lib 的确切版本并进行比较它到示例中的那个。我使用的是打包在 'twitter-typeahead-rails' gem 中的 typeahead.js 0.10.5，而在 examples 中使用的版本是 typeahead.js 0.11.1。

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

从 twitter-typeahead changelog 引用版本 0.11..0：

...这个版本有很多 API 变化，所以不要指望向后兼容以前的版本。也有很多已引入的未记录的新功能。文档这些功能将在 v1 发布之前添加。 ...

【讨论】：

注意：这仍然适用于 2018 年，因为版本仍然是 0.11.1。此外，如果您使用的是 Nuget，则版本为 0.10.1 - 所以请从他们的网站获取最新版本。

【解决方案2】：

你必须使用source: bh.ttAdapter() 而不是source: bh

【讨论】：

这让我走到了一半，但所有结果都只是说undefined，有什么想法吗？
我通常这样做的方式是使用displayKey 选项来调用typeahead，但这是为了引用对象的键。也许让你的 data 数组成为一个带有 value 属性的对象数组，并将 displayKey: 'value' 传递给 typeahead
我尝试这样做但没有运气，您介意在答案中发布一个完整的示例吗？
您可以通过这种方式将数据转换为对象数组data = data.map(function(_, i){ return {'value': data[i]}; });
我认为这两个响应都很好，但是正如@bosskovic 建议的那样，版本 1.11.0 有其他错误，请参阅here，所以我解决了保留版本 1.10.5 的问题并使用了这个响应解决我的问题。