Twitter Typeahead 远程未完成某些查询答案

【问题标题】：Twitter Typeahead remote not completing some queriesTwitter Typeahead 远程未完成某些查询
【发布时间】：2015-10-30 13:18:05
【问题描述】：

我在 0.11.1 版中使用 Twitter Typeahead。现在我正试图让远程正常工作，但不知何故我认为我的行为很奇怪。

这是带有本地数组的工作代码：

var localArray = [{"value":"test0"},{"value":"test1"},{"value":"test2"},{"value":"test3"},{"value":"test4"}];
var myds = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: localArray
});
$(function () {
    $("#my-input").typeahead({},
    {
        name: 'ds1',
        source: myds,
        display: 'value'
    });
});

现在我尝试设置远程数据。我所做的只是将本地更改为远程并提供 URL 并添加查询参数。它将提供与 localArray 完全相同的结构和数据（它目前忽略查询并始终提供 localArray 的内容只是为了测试它）。我在 Chrome 开发人员工具中检查了该查询实际上已执行并返回 localArray 的内容：

var myds = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/autocomplete?query=%QUERY',
        wildcard: '%QUERY'
    }    
});
$(function () {
    $("#my-input").typeahead({},
    {
        name: 'ds1',
        source: myds,
        display: 'value'
    });
});

搜索test 时不知何故这不起作用。搜索tes 时，我仍然得到结果，但是当我搜索test 时，没有提供自动完成的结果。还有其他的词这不起作用，它似乎遵循相同的模式，就像找不到完整的词而找到部分词一样。知道是什么导致了这种行为或如何解决它吗？

我的猜测是远程数据源必须是另一种格式，但我找不到它的外观。 typeahead 页面上的所有示例看起来都非常相似...

【问题讨论】：

你的远程数据是什么格式的？
纯json：[{"value":"test0"},{"value":"test1"},{"value":"test2"},{"value":"test3"},{"value":"test4"}]
我想看看您是否遇到了一个已知的预输入错误。您能否在您的预输入设置中添加limit: 2 并查看其他搜索是否开始工作（当然只返回 2 个结果）？
请注意，如果您手动进行更改（就像我所做的那样），您只需向下移动 rendered += suggestions.length; 行。不用担心规范文件，这只是一个测试。
好的，所以我用我的其余代码进行了测试，现在一切正常。非常感谢，非常感谢您的帮助！请发表您的评论，建议将该行作为答案，以便我接受:)

标签： typeahead.js twitter-typeahead

【解决方案1】：

您在输入前遇到bug。在处理等于或小于 typeahead 中声明的限制（默认限制为 5）的结果集时，它会导致奇怪的行为。不幸的是，主要的 typeahead repo 不再维护，因此您必须使用修复问题的 PR 或自己编辑代码。幸运的是，修复只是移动了一行代码。

在已编译的包或src/typeahead/dataset.js 中找到此代码块并将其更改为：

function async(suggestions) {
    suggestions = suggestions || [];
    if (!canceled && rendered < that.limit) {
        that.cancel = $.noop;
        that._append(query, suggestions.slice(0, that.limit - rendered));
        rendered += suggestions.length;
        that.async && that.trigger("asyncReceived", query);
    }
}

所有这些都是移动rendered += suggestions.length; 下面 that._append(query, suggestions.slice(0, that.limit - rendered));;

这在this PR中举例说明。

【讨论】：