How do I use templating in MentionsInput.js?

Question

Note: This could be a documentation for the feature of templating the list item for the plugin jQuery.mentionsInput. So I request the users, not to close this or delete this question. TIA.

I am using jQuery.mentionsInput in my project. Everything works fine. I am calling the plug-in using this:

$(".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);
        });
    }
});

And the source of /usersList looks like this:

[
    {
        "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"
    }
]

If you could see, there's a Full Name (name) and a username (id) associated with every user. I would like the plug-in to display the username along with the full name, so I made an amendment to the JSON like this:

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

But this gives an effect like below in the textarea:

Hello Praveen Kumar (@Praveen), how are you?

Instead of displaying like:

Hello Praveen Kumar, how are you?

I want this to be displayed only when the suggestion takes place and not during the insertion into the textbox. I know this can be changed using templates, but there's no documentation anywhere given on their website. Can someone help? I am using this:

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

Any heads-up on this part? Thanks in advance.

score 3 · Accepted Answer · answered Apr 24 '15 at 15:12

Finally I found it out. I had to do the following:

Add a template item: autocompleteListItem.
Edit the autocompleteListItem to include the ID by adding (@<%= id %>) next to the <%= content %>.

To display the search based on the ID, add the following in the return of the _.filter function.

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

Hope this is helpful to someone. Currently, I am using this code:

$(".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>')
    }
});

How do I use templating in MentionsInput.js?

1 Answers1