如何在MentionsInput.js中使用模板？

Question

注释：，这可能是插件jQuery.mentionsInput的列表项模板特性的文档。所以我请求用户不要关闭这个问题或者删除这个问题。蒂娅。

我在我的项目中使用jQuery.mentionsInput。一切都很好。我把这个插件叫做：

$(".mention").mentionsInput({
    onDataRequest: function (mode, query, callback) {
        $.getJSON('/usersList', function(responseData) {
            responseData = _.filter(responseData, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });
            callback.call(this, responseData);
        });
    }
});

/usersList的来源如下所示：

[
    {
        "id": "Praveen",
        "name": "Praveen Kumar",
        "avatar": "/img/users/1.jpg",
        "type": "user"
    },
    {
        "id": "jeff",
        "name": "Jeff Atwood",
        "avatar": "/img/users/2.jpg",
        "type": "user"
    },
    {
        "id": "pekka",
        "name": "Pekka Gaiser",
        "avatar": "/img/users/3.jpg",
        "type": "user"
    },
    {
        "id": "billgates",
        "name": "Bill Gates III",
        "avatar": "/img/users/4.jpg",
        "type": "user"
    }
]

如果您可以看到，有一个全名(name)和一个用户名(id)与每个用户相关联。我希望插件显示用户名和全名，所以我对JSON做了如下修改：

"name": "Praveen Kumar (@Praveen)",

但这在文本区域提供了如下所示的效果：

你好，Praveen Kumar (@Praveen)，你好吗？

而不是以如下方式显示：

你好，Praveen Kumar，你好吗？

我希望只有在建议发生时才显示这一点，而不是在插入到文本框期间。我知道这可以用templates来改变，但是在他们的网站上没有任何文档。有人能帮忙吗？我用的是：

templates: {
    wrapper: _.template('<div class="mentions-input-box"></div>'),
    autocompleteList: _.template('<div class="mentions-autocomplete-list"></div>')
}

这部分有什么进展吗？提前谢谢。

Answer 1

最后我发现了。我必须做以下几点：

1. 添加一个template项：autocompleteListItem。
2. 通过在autocompleteListItem旁边添加(@<%= id %>)来编辑<%= content %>以包含ID。
3. 若要根据ID显示搜索，请在return函数的_.filter中添加以下内容。 返回( item.name.toLowerCase().indexOf(query.toLowerCase()) > -1欧元/ item.id.toLowerCase().indexOf(query.toLowerCase()) > -1 //也添加这个ID部分！)

希望这对某人有帮助。目前，我正在使用以下代码：

$(".mention").mentionsInput({
    onDataRequest: function (mode, query, callback) {
        $.getJSON('/usersList', function(responseData) {
            responseData = _.filter(responseData, function(item) { return (item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 || item.id.toLowerCase().indexOf(query.toLowerCase()) > -1) });
            callback.call(this, responseData);
        });
    },
    templates: {
        autocompleteListItem: _.template('<li data-ref-id="<%= id %>" data-ref-type="<%= type %>" data-display="<%= display %>"><%= content %> (@<%= id %>)</li>')
    }
});