Question

So i’m using this plugin https://github.com/podio/jquery-mentions-input for my comment system, everything works fine but I would like to add a function. This function would be that when I click on a link (Reply) it would add a mention/tag of the users name in the textarea at the position where the cursor is.

Does any one have an idea how to do this ?

I was able to add a mention once I had already added one tag (writing the @ character). I figured out that there was an issue with the initialization of the textarea and the position of the cursor at the time when the link is clicked, but I cannot seem to figure out how to make that work.

I added a addReply function to my the jquery file.

// Public methods
return {
  init : function (options) {
    settings = options;

    initTextarea();
    initAutocomplete();
    initMentionsOverlay();
  },

  val : function (callback) {
    if (!_.isFunction(callback)) {
      return;
    }

    var value = mentionsCollection.length ? elmInputBox.data('messageText') : getInputBoxValue();
    callback.call(this, value);
  },

    addReply : function (id, text, type) {
       initTextarea();
       initAutocomplete();
       initMentionsOverlay();
       addMention(text, id, type);
    },

  reset : function () {
    elmInputBox.val('');
    mentionsCollection = [];
    updateValues();
  },

  getMentions : function (callback) {
    if (!_.isFunction(callback)) {
      return;
    }

    callback.call(this, mentionsCollection);
  }
};

And it is called with this little script that is on the same page as the textarea (values are just for testing)

$('.add-mention').click(function() {
  $('textarea.mention').mentionsInput('addReply',('Joris', 9, 'contact') );
});

After testing around, the big problem looks like that without the @ the jquery code doesn’t find where the beginning of the tag will start and therefor doesn’t add it.

I hope that someone can help me on this, it is starting to drive me crazy !!!

Thanks
Joris

Answer 1

Joris – take a look at this if you haven’t already figured this one out – https://github.com/podio/jquery-mentions-input/pull/37