javascript - Bootstrap 的 Tokenfield with Twitter Typeahead 在建议中显示对象而不是值

Question

我正在使用 tokenfield 进行 bootstrap 和 twitter typeahead，我能够做到这一点。

http://i.stack.imgur.com/dtFbj.png

我只想显示值。

这是我的 JS:

var engine = new Bloodhound({
        local: bloodhound_tag_data,
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });
    engine.initialize();
    $('#id_tags').tokenfield({
        typeahead: [null, { source: engine.ttAdapter() }]
    });

“bloodhound_tag_data”是一个包含“id”和“value”键的对象列表。

Answer 1

我遇到了同样的问题。在您的代码中尝试将 typeahead: [null, { source: engine.ttAdapter() }] 替换为以下内容:

typeahead: [null, {
   display: 'value',
   source: engine.ttAdapter()
}]

在我观察到与您的屏幕截图非常相似的情况时，这解决了我的问题。

一些背景:typeahead.js 的display 选项的文档对于像我这样经验不足的人来说，似乎有点难以理解。它说(我认为与粗体相关的词):

For a given suggestion, determines the string representation of it. This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. Defaults to stringifying the suggestion.

在这种情况下，'value' 是数组 bloodhound_tag_data 中元素之一的字段的键。

编码愉快!

如果我的回答中有任何可以改进的地方，请添加带有建设性建议的评论。谢谢!