javascript - bootstrap Tags-input[JS] - 无法在数据集中的建议列表中设置(或显示)多个数据

Question

我使用 typehead.js 创建引导标签输入，但无法在下拉列表中显示超过 1 个结果(建议)。这是我要处理的代码:

JS:

var tag = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'http://blog.dev/admin/manager/911/fetch-tags'
    }
});
tag.initialize();

var elt = $("#tags");
elt.tagsinput({
    typeaheadjs: {
        name: 'tag_name',
        displayKey: 'tag_name',
        valueKey: 'tag_name',
        source: tag.ttAdapter(),
        templates: {
            empty: [
                '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
            ],
            header: [
                '<div class="list-group search-results-dropdown"></div>'
            ],
            suggestion: function (data) {
                console.log(data);
                    return '<a href="javascrtipt:void(0)" class="list-group-item">' + data[1].tag_name  + '</a>';
            }
        }
    }
});

<div class="example example_typeahead">
      <input type="text" id="tags" value="Amsterdam,Washington" data-role="tagsinput">
      </div>

远程 url 结果返回此 json 格式:

{
    "name":
    [{"id": 1, "tag_name": "cat"},
    {"id": 2, "tag_name": "dog"},
    {"id": 3, "tag_name": "cow"}]
}

这个对象通过console.log(data)返回

[Object, Object, Object, Object, Object]
0:Object
id:1
tag_name:"cat"
__proto__:Object 
1:Object
id:2
tag_name:"dog"
__proto__:Object
.......

并且它只显示建议列表中的第一个结果。我想要它 显示所有结果，但我不能。

Answer 1

我认为您只返回了一个建议。应该是这样的 -

            suggestion: function (data) {
            console.log(data);
            var suggestList = "";
            for (var i = 0; i < data.length; i++) {
                suggestList += '<a href="javascrtipt:void(0)" class="list-group-item">' + data[i].tag_name  + '</a> <br/> \n' ;
            }
                return  suggestList;
        }