Configuration
Query data structure
Markup format
When mentions are being added to the input, a marked-up version of the value is generated, to allow the mentions to be extracted, parsed and stored later.
- This is a message for @[name](type:id) + This is a message for @[name](type:id) #[tag](type:id)
Like:
- This is a message for @[Kenneth Auchenberg](contact:1) + This is a message for @[Kenneth Auchenberg](contact:1) #[Issue 22](tag:22)+
Browser support
jquery.mentionsInput has been tested in Firefox 6+, Chrome 15+, and Internet Explorer 8+.
Please let us know if you see anythin weired. And no, we will no make it work for older browsers. Period.
diff --git a/jquery.mentionsInput.js b/jquery.mentionsInput.js index 6dc6d78..4fe218e 100644 --- a/jquery.mentionsInput.js +++ b/jquery.mentionsInput.js @@ -28,7 +28,7 @@ autocompleteListItemAvatar : _.template(''),
- mentionItemSyntax : _.template('@[<%= value %>](<%= type %>:<%= id %>)'),
+ mentionItemSyntax : _.template('<%= triggerChar %>[<%= value %>](<%= type %>:<%= id %>)'),
mentionItemHighlight : _.template('<%= value %>')
}
};
@@ -104,14 +104,14 @@
var syntaxMessage = getInputBoxValue();
_.each(mentionsCollection, function (mention) {
- var textSyntax = settings.templates.mentionItemSyntax({ value : mention.value, type : 'contact', id : mention.id });
+ var textSyntax = settings.templates.mentionItemSyntax({ value : mention.value, type : mention.type, id : mention.id, triggerChar: mention.trigger });
syntaxMessage = syntaxMessage.replace(mention.value, textSyntax);
});
var mentionText = utils.htmlEncode(syntaxMessage);
_.each(mentionsCollection, function (mention) {
- var textSyntax = settings.templates.mentionItemSyntax({ value : utils.htmlEncode(mention.value), type : 'contact', id : mention.id });
+ var textSyntax = settings.templates.mentionItemSyntax({ value : utils.htmlEncode(mention.value), type : mention.type, id : mention.id, triggerChar: mention.trigger });
var textHighlight = settings.templates.mentionItemHighlight({ value : utils.htmlEncode(mention.value) });
mentionText = mentionText.replace(textSyntax, textHighlight);
@@ -139,9 +139,10 @@
function addMention(value, id, type) {
var currentMessage = getInputBoxValue();
+ var currentTriggerChar = $(this).data('triggerChar');
// Using a regex to figure out positions
- var regex = new RegExp("\\" + settings.triggerChar + currentDataQuery, "gi");
+ var regex = new RegExp("\\" + currentTriggerChar + currentDataQuery, "gi");
regex.exec(currentMessage);
var startCaretPosition = regex.lastIndex - currentDataQuery.length - 1;
@@ -156,7 +157,8 @@
mentionsCollection.push({
id : id,
type : type,
- value : value
+ value : value,
+ trigger : currentTriggerChar
});
// Cleaning before inserting the value, otherwise auto-complete would be triggered with "old" inputbuffer
@@ -189,17 +191,26 @@
resetBuffer();
}
+ function checkTriggerChar(inputBuffer, triggerChar) {
+ var triggerCharIndex = _.lastIndexOf(inputBuffer, triggerChar);
+ if (triggerCharIndex > -1) {
+ currentDataQuery = inputBuffer.slice(triggerCharIndex + 1).join('');
+ _.defer(_.bind(doSearch, this, currentDataQuery, triggerChar));
+ }
+ }
function onInputBoxInput(e) {
updateValues();
updateMentionsCollection();
hideAutoComplete();
- var triggerCharIndex = _.lastIndexOf(inputBuffer, settings.triggerChar);
- if (triggerCharIndex > -1) {
- currentDataQuery = inputBuffer.slice(triggerCharIndex + 1).join('');
+ if (_.isArray(settings.triggerChar)) {
+ _.each(settings.triggerChar, function (triggerChar) {
+ checkTriggerChar(inputBuffer, triggerChar);
+ });
+ } else {
+ checkTriggerChar(inputBuffer, settings.triggerChar);
+ }
- _.defer(_.bind(doSearch, this, currentDataQuery));
- }
}
function onInputBoxKeyPress(e) {
@@ -312,11 +323,12 @@
elmDropDownList.show();
}
- function doSearch(query) {
+ function doSearch(query, triggerChar) {
if (query && query.length && query.length >= settings.minChars) {
settings.onDataRequest.call(this, 'search', query, function (responseData) {
populateDropdown(query, responseData);
- });
+ $(this).data('triggerChar', triggerChar);
+ }, triggerChar);
}
}
@@ -334,7 +346,6 @@
if (!_.isFunction(callback)) {
return;
}
-
var value = mentionsCollection.length ? elmInputBox.data('messageText') : getInputBoxValue();
callback.call(this, value);
},