1

注意：这可能是为插件jQuery.mentionsInput模板化列表项功能的文档。所以我要求用户不要关闭这个或删除这个问题。TIA。

我在我的项目中使用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)",

但这会在 textarea 中产生如下效果：

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

而不是显示如下：

你好Praveen Kumar，你好吗？

我希望仅在建议发生时而不是在插入文本框期间显示此内容。我知道这可以使用 更改templates，但他们的网站上没有任何文档。有人可以帮忙吗？我正在使用这个：

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

这部分有什么注意事项吗？提前致谢。

4

1 回答 1

3

最后我发现了。我必须执行以下操作：

  1. 添加template项目：autocompleteListItem。
  2. 通过在 旁边添加来编辑autocompleteListItem以包含 ID 。(@<%= id %>)<%= content %>

  3. 要显示基于 ID 的搜索，请return在_.filter函数中添加以下内容。

    return (
   item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 ||
   item.id.toLowerCase().indexOf(query.toLowerCase()) > -1 // Add this ID part too!
)

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

$(".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>')
    }
});
于 2015-04-24T15:12:25.927 回答