Question

我似乎遇到与Twitter Typeahead Ajax results undefined相同的问题，但这个问题一直没有解决，所以我再次提问，希望我能提供一些遗漏的细节。

我使用的是独立的预先输入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>

第一次尝试时，我在http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead上建模了我的脚本，一切似乎都有效，直到调用process（）。它不是用我的结果填充autosuggest下拉列表，而是仅包含未定义的＆＃39;值（虽然元素的数量正确）。

$("#create_track").click(function() {
    var names_id_map = {};
    $('#ul_results').addClass('hide');
    $('#create_track_form').removeClass('hide');
    // use debounce from underscore.js to throttle requests to server
    var suggestArtists = _.debounce(function(query, process) {
        var artist_names = [];
        $.get(ARTIST_NAMES_URL, { q: query }, function (data) {
            // 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;
                    });
                }
            });
            process(artist_names);
        });
    }, 300); // rate limit requests to server

    $("#artist_name").typeahead(null, {
        name: 'artist-names',
        minLength: 1,
        source: function (query, process) {
            suggestArtists(query, process);
        },
        updater: function (item) {
            console.dir('updater: ' + item); // never output
            $("#artist_id").val(names_id_map[item]);
            // return value which should be selected in drop-down
            // return item;
        },
    });

    return false;
});

可能已经为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;
})

我可以输入＆＃34; a＆＃34;或者＆＃34; d＆＃34;，例如，得到一个＆＃34;未定义＆＃34;建议。键入＆＃34; b＆＃34;，＆＃34; c＆＃34;或＆＃34; z＆＃34;没有任何暗示。

我已经阅读了关于Google＆amp ;;所以在最后一天。我相信我的JSON被正确解码，并且在所有情况下我的artist_names都是本地JS字符串数组。

Answer 1

重新开始https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#api上的示例（并由另一个重复Why does bloodhound.get() return undefined?提示），我意识到我的本地值数组实际上需要与合作中的哈希/字典datumTokenizer＆amp; 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(), 
});

我的初始语法来自我通过谷歌找到的一些教程，这些教程可能正在使用该库的旧引导版本（例如，我链接到@帖子的顶部：“然后一个简单的名称数组（['John Smith'，'Jane Smith'，...]）被传递给process（）回调。“）。

twitter typeahead.js process（）使用undefineds填充列表

1 个答案: