@ sign in front of mention and images returned in autocomplete list?

[deronsizemore]

I apologize in advance that my questions aren't really "bugs" but I wasn't sure what other avenues were available for asking questions.

I've got this working nicely and have the drop down styled to my liking. I'm now wondering if it's possible to include the @ sign in front of the returned mention?

Also, in the data source, is it possible to include an image? I'd like to include a unique image next to each item in the returned list but I'm not seeing how to do it.

Sorry... I also wanted to ask about using a URL .json data source. I'm going to be using for for returning users of my site. What if there's like 50k users hypothetically? Would all 50k users be returned for the auto complete? What seems to be the best approach (but I'm a novice here) is with every character that's typed, it would dynamically add that letter to the URL that I'm using for the data source to which I could then use that letter to query the database and return .json data for users starting with just that one letter rather than all 50k users. Does that make sense?

EDIT Upon further review of the jquery UI docs for autocomplete, I noticed that a querystring is added to the source with a "term" field. So I believe that's what I needed regarding that last question above.

Thanks.

[ivirabyan]

Icons can be shown in a dropdown list if you add image property to objects in datasource.

[ivirabyan]

There's no option to add '@' sign to the mention. For now you can just pass values prepended with '@' to get desired effect. The only disadvantage is that you'll see that sign in dropdown list also. If that doesn't meet you requirements, you can add an issue for that, I'll try to add such option.

[deronsizemore]

Thanks again. The no @ sign isn't a huge deal. My main purpose for wanting it was using regex to search the comment field on submit so that I could notify users that someone mentioned them in a comment. Without some kind of unique identifier, that might be tough but worst case I'll just pass the @ sign into the autocomplete. I really appreciate your help!

[ivirabyan]

Oh, now I understand, what you need is already there. When you insert a mention, what is really written to the field value is something different from you see. Any mention is represented as [value](uid) in input's value. For example [Alex](1), so you can use a regexp to find such mentions. Again, this already implemented inside of django-mentions app

[deronsizemore]

hmm, ok. I'm not sure I follow 100%. So when I start typing "de" and "deronsizemore" pops up and I select it, I see this returned as the html: < strong data-mention="deronsizemore:18" >deronsizemore< /strong >

Is the the "data-mention" attribute what you're referring to? Or is there actually something else that's there that's not visible by viewing source to which a regex would see?

Thanks

[ivirabyan]

I'm sorry, what I wrote previously was related to ordinary textarea. For the contenteditable divs there is no any hidden inputs, to get a formatted value you should use method getValue(). It replaces <strong data-mention="deronsizemore:18">deronsizemore</strong> with @[deronsizemore](deronsizemore:18) in text. Then this value must be sent to the server.

[deronsizemore]

Ok, I did a quick workaround with this. Seems to work fine. I also used some CSS magic to get it to work to my liking. First I have this in my view:

'value': '< a href="%s" >< span >@< /span >%s< /a >' % (item.user.username, item.user.username),

So of course that's returning the @ sign into the autocomplete drop down which I didn't want (I only wanted it to appear in the comment field so I could use regexp and send a notification signal to the user who was mentioned. So, to remove it from the autocomplete drop down but keep it in the resulting output:

.ui-menu .ui-menu-item span { display: none; }

It doesn't appear to cause any issues and does exactly what i want without the need for a template filter and regex to find the mention and turn it into a link. What are your thoughts?

[ivirabyan]

For me it's kind of hacky and not very flexible :) But if that seems good to you, why not.

[deronsizemore]

Dammit... and here I thought I was being clever and saving myself what would likely turn out to be about five hours worth of work to get the template filter working. :smile:

[deronsizemore]

Hey! So... I'm back. Not with another issue but general question. So, I attempted again to write a template filter for this and it worked mostly except it kept finding and replacing the wrong thing. Anyway, went another route. I know you will probably say it's hacky but it seems like the path of least resistance to me. So my question is, in your jquery.mentions.js file, there's two bits of code where it inserts strong tags around the mention.value variable. The one was obvious as I could clearly tell it was the line that was being inserted when I select a name from the autocomplete drop down.

So I now have this that's being inserted into the contenteditable field after I select a name:

mentionTpl = function(mention) {
  return "<a href=\"" + "/" + mention.value + "\">" + "@" + mention.value + " " + "</a>";
};

That works great and does exactly what I need for my use.

The part I'm not sure about is this;

MentionsInput.prototype._updateValue = function() {
  var hlContent, markedName, mention, value, _i, _len, _ref;
  value = hlContent = this.input.val();
  _ref = this.mentions;
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    mention = _ref[_i];
    markedName = this._mark(mention.name);
    hlContent = hlContent.replace(markedName, "<strong>" + mention.name + "</strong>");
    value = value.replace(markedName, this._markupMention(mention));
  }
  this.hidden.val(value);
  return this.highlighterContent.html(hlContent);
};

Specifically the: "<strong>" + mention.name + "</strong>" part. What is that doing? In all of my testing, I've never seen it insert that line anywhere after selecting a name from the autocomplete drop down.

Thanks

[ivirabyan]

There are two types of editors supported by this plugin: ordinary textarea's and WYSIWYG editors. They both need different processing, so there are two separate classes, each is responsible for its type of editor: MentionsInput and MentionsContenteditable. That's why you encountered the <strong> tag two times. In your case, second sample not used, because you don't use textarea, so you don't have to care about it.

[deronsizemore]

Oh, thanks. That seems obvious now that you pointed it out. Sorry, wasn't quite thinking on that one. Thanks again.

[ivirabyan]

I'm glad I could be helpful to you ;)