Typeahead.js：强制重新加载本地数据集答案

【问题标题】：Typeahead.js: Force reload of local datasetTypeahead.js：强制重新加载本地数据集
【发布时间】：2013-07-23 23:24:53
【问题描述】：

我想实现一个类似于 Twitter 的网络应用程序的原始后备选项，它具有输入值的最终自动完成选项（例如 Search all people for {{input.val()}}）：

我当前的实现失败了，因为Typeahead.js 没有重新加载本地数据集，因此所需的效果只发生在第一个 keyup 事件上：

var plusone = [
    {
        value: '',
        tokens: ''
    }
];

$('#name').keyup(function () {
    plusone[0].value = $('#name').val();
    plusone[0].tokens = $('#name').val();
});

$('#name').typeahead(
    [
        {
            local: plusone
        }
    ]
);

根据文档和这个tutorial，没有办法在不首先破坏它的情况下重新初始化typeahead，我不想为了性能而这样做。任何关于更好实施或修复的建议将不胜感激（如果 Twitter 的任何人在那里，我很想知道您的实施）。

【问题讨论】：

在 v0.9.x 中没有实现该功能的好方法，但我希望您能够在 v0.10 中实现。一旦我发布 v0.10，我会回到这里并给出正确的答案。
@jharding 好的，感谢您的更新，我期待有一个强大的解决方案。
布罗迪，你有没有找到解决办法。我面临同样的情况，想知道你想出了什么。
@DavidRobbins v0.10 of Typeahead 现已发布 - 我还没有时间研究它，但听起来上面的内容现在很容易实现。我知道后会回复。
@jharding 你应该回圈寻求正确答案

标签： javascript typeahead typeahead.js

【解决方案1】：

您可以通过使用自定义源函数将新数据集添加到 typeahead 来做到这一点。

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'nba.json'
});

nbaTeams.initialize();

$('#autosuggest-input').typeahead({
    highlight: true,
    hint: false
}, {
    name: 'nba-teams',
    displayKey: 'team',
    source: nbaTeams.ttAdapter(),
    templates: {
        header: '<h3 class="league-name">NBA Teams</h3>'
    }
}, {
    name: 'advanced-search',
    displayKey: 'name',
    // For every dataset, typeahead expects you to provide a source property
    // which is a function that accepts two arguments: query and cb. And you
    // can do whatever you want in that function. In this case, what we do
    // is that regardless of the query provided, you will always return the
    // same result.
    source: function(query, cb) {
        var result = [{
            'name': 'Advance search for "' + query + '"'
        }];
        cb(result);
    },
    templates: {
        header: '<div style="border-top: 1px solid black;"></div>'
    }
});

演示和学分：http://plnkr.co/edit/cjL6nZtShyxmLjWxzdBC?p=preview

【讨论】：

自从 v0.10 发布以来，这确实是可能的，谢谢你的例子。