远程 JSON 的奇怪行为 Typeahead答案

【问题标题】：Strange behaviour Typeahead with remote JSON远程 JSON 的奇怪行为 Typeahead
【发布时间】：2015-05-07 10:48:06
【问题描述】：

在过去的几个小时里，我试图理解一个非常奇怪的行为。

我已经做了一个自我解释的 JSFiddle you can find here.

Stackoverflow 不接受没有代码的 jsfiddle，所以我们开始...：

$(function(){
    var $el = $('#typeahead');
    var resultsObj = {};
    var resultsStrings = [];
    var engine = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace, 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/echo/json/',  
            prepare: function(xhr, settings) {
                settings.dataType = 'json';
                settings.type = 'POST';
                settings.data = {json: fakeSearchForFiddle($el.typeahead('val'))};
                return settings;
            }, 
            transform: function(data) {
                showRawResult(data);

                resultsObj = {};
                resultsStrings = [];

                if ($.isArray(data)) {
                    for (var i = 0; i < data.length; ++i) {
                        resultsObj[data[i].ref] = data[i];
                        resultsStrings.push(data[i].ref);
                    }
                }
                return resultsStrings;
            }
        }
    });
    engine.initialize();

    $el.typeahead({
        highlight: false
    }, {
        name: 'main', 
        source: engine.ttAdapter(), 
        templates: {
        empty: '<div class="empty-message">No result</div>', 
            suggestion: function(data) {
                if (resultsObj[data] !== undefined) {
                    return '<div>'+resultsObj[data].ref+' <span>('+resultsObj[data].details+')</span></div>';
                }
                return '<div>Unknown</div>';
            }
        }
    });
});

服务器返回一个 JSON 数组，该数组由包含“ref”和“details”键的对象组成。此测试的目标是使用以下语法显示建议：

"result.ref (result.details)"

它适用于 1 个、两个或超过 5 个结果。否则它完全搞砸了，我不明白为什么。

我花了几个小时尝试不同的东西，但无法成功，而且文档真的很模糊。

感谢您的帮助。

编辑：I've posted an issue on Github

【问题讨论】：

标签： javascript jquery ajax typeahead.js typeahead

【解决方案1】：

我对 typeahead.js 的源代码做了一个小的修改，因为我需要这个东西尽快工作。

问题来自“typeahead.bundle.js:1719”：

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

我已经换了：

rendered += suggestions.length;
that._append(query, suggestions.slice(0, that.limit - rendered));

作者：

suggestions = (suggestions || []).slice(0, that.limit);
rendered = suggestions.length;
that._append(query, suggestions);

而且它似乎有效.. 我不知道这种修改可能产生的副作用，所以我会在 typeahead 的 github 上发布它，希望他们会更新库或解释我做错了什么。

编辑：Github issue

【讨论】：