Javascript twitter typeahead.js process（）用未定义的项填充列表

我似乎有同样的问题，但这已经没有得到解决，所以我再次问，希望我可以提供一些遗漏的细节

我正在使用独立的typeahead 0.10.2和bootstrap 2.3.1。下划线是1.6.0。包含的库的完整列表如下：

<script src="/static/portal/js/jquery-1.9.1.min.js"></script>
<script src="/static/portal/js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="/static/portal/js/bootstrap.min.js"></script>
<script src="/static/portal/js/typeahead.bundle.min.js"></script>
<script src="/static/portal/js/hogan-2.0.0.min.js"></script>
<script src="/static/portal/js/underscore-min.js"></script>

该特定教程可能是为typeahead的旧引导捆绑版本创建的。通过使用typeahead较新独立版本的文档，我提出了一个行为相同的方法，从而生成了一个包含正确数量的未定义项的菜单：

$("#create_track").click(function() {
    var names_id_map = {};
    $('#ul_results').addClass('hide');
    $('#create_track_form').removeClass('hide');

    var artistNames = new Bloodhound({
        name: 'artist-names',
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: ARTIST_NAMES_URL + '?q=%QUERY',
            //rateLimitBy: debounce, // debounce is not defined?
            rateLimitWait: 300,
            filter: function(data) {
                var artist_names = [];
                // data = {"results": [{"id": "artist_123", "name": "xyz"}, ...]}
                $.each(data, function (key, val) {
                    if (key == "results") {
                        $.each(val, function (i, item) {
                            artist_display = item.name + ' - ' + item.id;
                            artist_names.push(artist_display);
                            names_id_map[artist_display] = item.id;
                        });
                    }
                });
                return artist_names;
            },
        }
    });
    artistNames
        .initialize()
        .done(function() { console.log('artistNames init success'); });

    $("#artist_name").typeahead(null, {
        minLength: 1,
        source: artistNames.ttAdapter(),
    });

    return false;
});

如果我用如下本地数据填充它：

$("#create_track").click(function() {
    var names_id_map = {};
    $('#ul_results').addClass('hide');
    $('#create_track_form').removeClass('hide');

    var artistNames = new Bloodhound({
        name: 'artist-names',
        datumTokenizer: Bloodhound.tokenizers.whitespace,
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: ["Abc", "Def", "Ghi", "Jkl"],
    });
    artistNames.initialize()
        .done(function() { console.log('artistNames init success'); });

    $("#artist_name").typeahead(null, {
        minLength: 1,
        source: artistNames.ttAdapter(),
    });

    return false;
})

例如，我可以键入“a”或“d”，然后得到一个“未定义”的建议。键入“b”、“c”或“z”不会给出任何建议

---

我已经在谷歌上阅读了关于typeahead的所有信息&所以在过去的一天里。我确信我的JSON被正确解码，而且在所有情况下，我的艺术家名称都是一个原生JS字符串数组

从上的示例开始（在另一个副本的提示下），我意识到我的本地值数组实际上需要是与datumTokenizer和typeahead的displayKey合作的哈希/字典。我现在有一个简单的例子，用于处理单个前导字母的建议：

var artistNames = new Bloodhound({ 
    name: 'artist-names',
    datumTokenizer: function (d) { return d.d; },
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: [{"d": "Abc"}, {"d": "Aaa"}, {"d": "Aab"}, {"d": "Def"}, {"d": "Ghi"}, {"d": "Jkl"}, {"d": "John Coltrane"}], 
}); 
artistNames.initialize().done(function() { alert('setup ok'); });

$("#artist_name").typeahead(null, { 
    minLength: 1, 
    displayKey: "d",
    source: artistNames.ttAdapter(), 
});

---

我最初的语法来自我在google上找到的一些教程，这些教程可能使用了旧的库引导版本（例如，我链接到@top的这篇文章：“然后一个简单的名称数组（['John Smith'，'Jane Smith'，…]）被传递到process（）回调。”）.

请输入您自己的答案作为答案并接受

var artistNames = new Bloodhound({ 
    name: 'artist-names',
    datumTokenizer: function (d) { return d.d; },
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: [{"d": "Abc"}, {"d": "Aaa"}, {"d": "Aab"}, {"d": "Def"}, {"d": "Ghi"}, {"d": "Jkl"}, {"d": "John Coltrane"}], 
}); 
artistNames.initialize().done(function() { alert('setup ok'); });

$("#artist_name").typeahead(null, { 
    minLength: 1, 
    displayKey: "d",
    source: artistNames.ttAdapter(), 
});