jakiestfu / mention.js

Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin

mention.js's Issues

Position

Is there a way to set the preferred position somehow?

Does not work properly with international characters

I have the following users values:

                         { 
                            username: "AniSales",
                            name: "Ani Sales"
                        }, { 
                            username: "BonnięSales",
                            name: "Bonnię Sales"
                        },

If I type @AniSales all works well and the auto-complete finishes. I I type @bonn the autocomplete starts, but if I hit enter it does not finish.

I have had this problem with various Polish characters in the username.

Re-initialize a textarea with a new users list

Is there a way to re-initialize a textarea with a new data (user list) or add more user data? At the moment reusing .mention(...) on an element doesn't do anything!

Matching event always occurs when username have a period in the user name

I have some user names like this -> john.smith

When I select those type of user names and try to type more stuff with out entering the delimiter it always pops open the modal. When I select a username with out a period then it works fine.

Mention Again ?

How to mention same user again

Wrong link on Reame

Typeahead is linked to bootstrap's github page. Not a major problem but to clear the confusion it is good to fix for newbies who doesn't know the difference.

Retrieving selected data?

How do I retrieve the data? For example, if I use the Name, Username, & Image example,
and @username gets inserted into the table. How do I retrieve the full data array on form submission or for an ajax call?

enable multiples users

there are a way of enable multiple users ?

Array instead of list of users

Here is how it looks on my page

This is what I use

jQuery("#field_5").mention({
    users: [
        {
            name: 'Lindsay Made',
            username: 'LindsayM',
            image: 'http://placekitten.com/25/25'
        },
        {
            name: 'Rob Dyrdek',
            username: 'robdyrdek',
            image: 'http://placekitten.com/25/24'
        },
        {
            name: 'Rick Bahner',
            username: 'RickyBahner',
            image: 'http://placekitten.com/25/23'
        },
        {
            name: 'Jacob Kelley',
            username: 'jakiestfu',
            image: 'http://placekitten.com/25/22'
        },
        {
            name: 'John Doe',
            username: 'HackMurphy',
            image: 'http://placekitten.com/25/21'
        },
        {
            name: 'Charlie Edmiston',
            username: 'charlie',
            image: 'http://placekitten.com/25/20'
        },
        {
            name: 'Andrea Montoya',
            username: 'andream',
            image: 'http://placekitten.com/24/20'
        },
        {
            name: 'Jenna Talbert',
            username: 'calisunshine',
            image: 'http://placekitten.com/23/20'
        },
        {
            name: 'Street League',
            username: 'streetleague',
            image: 'http://placekitten.com/22/20'
        },
        {
            name: 'Loud Mouth Burrito',
            username: 'Loudmouthfoods',
            image: 'http://placekitten.com/21/20'
        }
    ]
);

I also include recommended CSS file.

When selecting an suggested option by clicking it, the active typing position does not shift to the end of the word

Point users to an external json file

Is this possible to point users to an external json file ?

License Type?

Error when you type the same user twice in the same text field

When you type in the same username in the same text field it does something weird: for example: When I want to type this: "@tomaszed91 but this plugin has a bug @tomaszed91", when I going to type the second time and I press enter it ends up like this: "@tomaszed91aszed91 but this plugin has a bug @tom", Im using bootstrap on Rails 3.2, thanks

Can we make the another auto-complete for HashTags in the same textarea?

Tell me how this thing will work with dynamically created textareas

New updated version!

I have an updated version of mention.js and you can get it using bower as well.

https://github.com/stoumann/Mention.js

Typeahead does not hide when using with queryBy: ['name', 'username'],

I have following code :

var following_list;

 $.ajax({

        type :"POST",
        url:"http://linkzone.dev/ajax/follower/select",
        data: '',
        dataType : 'json',
        cache: false,
        async:false,
        success:function(result){ 
            following_list = result;
        },
        error: function(xhr, textStatus, errorThrown) { 

        } 
    });


$("#usermention").mention({
        delimiter: '@',
        queryBy: ['name', 'username'],
        users: following_list
});

AJAX request return following data :

[
{
"name":"Reagan Dietrich",
"username":"Reagan8"
},
{
"name":"Ashlynn Powlowski",
"username":"Ashlynn4"
},
{
"name":"Tejas Kulkarni",
"username":"tejas"
}
]

Now when I use trigger like @tejas and after that even though I put a space bar/enter key still it shows up the typeahead , also it deletes any further text .

When i use it with queryBy: ['username'] It works fine .

Compatibility with Twitter Typeahead

Hi there,

We are using bootstrap 3, so the typeahead is now split out. It seems like this plug in doesn't work with the split out version, is there plans to fix it, or a simple workaround?

Thanks!

Brent

There a way to trigger an event to send notifications once a user is selected?

Hello there, great plugin, very useful and thanks to work on it.

I have a situation that I need to figure out and your plugin fit with my scenario, but there some questions that I need answers.

1. Any event to trigger after user is selected, and process a function to send notifications.
2. there is a way to create a link in user mention.

Thanks again

Selected event?

Is there an option to have a callback after selecting a mention item from the list? Twitter Typeahead (not the bootstrap version) has a selected event, but Mention.js doesn't seem to work with Typeahead....?

Thanks!

Compatibility with non textarea-based WYSIWYG elements

Mention.js has a great user experience. We're evaluating whether to sacrifice the wysiwyg textfield and make it a plain html textarea element to use it, since it seems to be working with textareas only.

What would it take to allow it to work with rich-text editing enabled elements?

Getting weird results in the items array

Given the following code...

$(".comment-box").mention({
    sensitive: true,
    users: [{
        username: "sarah"
    }, { 
        username: "bigRat"
    }, { 
        username: "roger"
    }, { 
        username: "Ricky"
    }]
});

When I type @h I end up with items in the _render function equaling

[function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }, 
Object
username: "sarah"
__proto__: Object
, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }]

If I type @s instead I get

[
Object
username: "sarah"
__proto__: Object
, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }, function () {
    return this.sort(function() {
      return 0.5 - Math.random();
    });
  }]

I'm not sure what is going on.

Possible to use this on elements aside from textareas? (wysiwyg)

I'm having trouble getting this to work with my Wysiwyg editor, which renders as an editable

instead of a textarea. Is it possible to extend this lib to work nicely with elements outside of textareas?

Dropdown doesn't hide when have more usernames with the same beginning

If we have "isaac" and "isaac2". When mentioning "isaac", the menu still there offering "isaac2". But I'd like to select "isaac" and hide the menu.

Sensitive doesn't work

Typing first two letters "mu", the first result is "HackMurphy" instead of "mutmaurice"...

$("#full").mention({
sensitive:true,
users:
 [{
                    name: 'Lindsay Made',
                    username: 'LindsayM',
                    image: 'http://placekitten.com/25/25'
                }, {
                    name: 'Rob Dyrdek',
                    username: 'robdyrdek',
                    image: 'http://placekitten.com/25/24'
                }, {
                    name: 'Rick Bahner',
                    username: 'RickyBahner',
                    image: 'http://placekitten.com/25/23'
                }, {
                    name: 'Jacob Kelley',
                    username: 'jakiestfu',
                    image: 'http://placekitten.com/25/22'
                },{
                    name: 'John Doe',
                    username: 'HackMurphy',
                    image: 'http://placekitten.com/25/21'
                }, {
                    name: 'Maurice',
                    username: 'mutmaurice',
                    image: 'http://placekitten.com/25/21'
                }, {
                    name: 'Charlie Edmiston',
                    username: 'charlie',
                    image: 'http://placekitten.com/25/20'
                }, {
                    name: 'Andrea Montoya',
                    username: 'andream',
                    image: 'http://placekitten.com/24/20'
                }, {
                    name: 'Jenna Talbert',
                    username: 'calisunshine',
                    image: 'http://placekitten.com/23/20'
                }, {
                    name: 'Street League',
                    username: 'streetleague',
                    image: 'http://placekitten.com/22/20'
                }, {
                    name: 'Loud Mouth Burrito',
                    username: 'Loudmouthfoods',
                    image: 'http://placekitten.com/21/20'
                }]
            });

Multiple delimiters with multiple set of data

For example handle both "@" for users and "#" for hashtags :)

Limiting mentions

Is there a way to limit number of users/entities mentioned ? I want to allow only 1 user to be mentioned in my status/post, how can I achieve this?

Add demo for using ajax to set the users array

Could you add an example for using mention.js with a function setting the users array?

With queryBy set to `username` and `name`, the list pops up after selecting the user

Love this plugin by the way. Super easy to use.

I realized that this is a duplicate of issue #13 but I wanted to let you know that it's still incorrect on the live demo using the user with the handle @charlie.

http://jakiestfu.github.io/Mention.js/

Here is the code and the description of the bug:

$(".mention").mention({
    queryBy: ['username', 'name'],
    users: [{
        username: "bob",
        name: "Bob Frank",
        image: "some image"
    }, {
        username: "jones",
        name: "Jones Wilson",
        image: "some image"
    }]

});

Then if I type something like "yay, @bob is awesome" after I choose bob, the list remains showing for that one user. If I only use username as queryBy this phenomenon doesn't occur.

What's weird is that if I give the username a value that is not a substring of the first name like bubba for Bob Frank this issue doesn't occur:

$(".mention").mention({
    queryBy: ['username', 'name'],
    users: [{
        username: "bubba",
        name: "Bob Frank",
        image: "some image"
    }, {
        username: "jicama",
        name: "Jones Wilson",
        image: "some image"
    }]

});

This works as expected. I'm looking into the code to see if I can figure out a fix, but if this is known or if you know why this is happening, I could sure use a hand getting it solved.

Show all users if typeahead minLength is set to zero

It should show whole list of users if typeaheadOpts: { minLength: 0 } is set. Thoughts?

Allow emoji and hash tags

It would be nice to also have mention be able to handle emoji and hash tags on the same textarea. I tried just running it twice on the same textarea but it didn't work.

Sort starts-with matches to top of list.

Missing users if search just by username.

http://jakiestfu.github.io/Mention.js/ last example. If you select for example @AndreaM you cannot select him again...

Ignore emails when using @ token

how to ignore email entries when using @ token? Just use: delimiter: '(^|\\s)@' option. Please add it to description or fix issue right in plugin code.

Link to typeahead from readme points to twitter bootstrap

It should point to here instead:
https://github.com/twitter/typeahead.js

Not working when delivering data dynamically through function

$("textarea#id").mention({
    user: get_mentions()
});

The _get_mentions()_ returns following data in console log:

[{"name":"waqas","username":"waqas","image":"http://1.gravatar.com/avatar/af6946f5faf8414bb87112f5dbcfd0be?s=96&d=mm&r=g"},{"name":"waqas","username":"waqas","image":"http://1.gravatar.com/avatar/af6946f5faf8414bb87112f5dbcfd0be?s=96&d=mm&r=g"},{"name":"waqas","username":"waqas","image":"http://1.gravatar.com/avatar/af6946f5faf8414bb87112f5dbcfd0be?s=96&d=mm&r=g"},{"name":"waqas","username":"waqas","image":"http://1.gravatar.com/avatar/af6946f5faf8414bb87112f5dbcfd0be?s=96&d=mm&r=g"},{"name":"admin","username":"admin","image":"http://0.gravatar.com/avatar/c647c51159fd78634f029028ea542fec?s=96&d=mm&r=g"},{"name":"admin","username":"admin","image":"http://0.gravatar.com/avatar/c647c51159fd78634f029028ea542fec?s=96&d=mm&r=g"},{"name":"admin","username":"admin","image":"http://0.gravatar.com/avatar/c647c51159fd78634f029028ea542fec?s=96&d=mm&r=g"},{"name":"admin","username":"admin","image":"http://0.gravatar.com/avatar/c647c51159fd78634f029028ea542fec?s=96&d=mm&r=g"}]

Autocomplete not working when $ is used as delimiter

The autocomplete search is not working when delimiter is set to '$'

$('#formula').mention({
                    delimiter: '$', 
                    emptyQuery: true,
                    users: users: [{
                    username: 'LindsayM'
                }, {
                    username: 'robdyrdek'
                }, {
                    username: 'RickyBahner'
                }, {
                    username: 'jakiestfu'
                }, {
                    username: 'HackMurphy'
                }, {
                    username: 'charlie'
                }, {
                    username: 'andream'
                }, {
                    username: 'calisunshine'
                }, {
                    username: 'streetleague'
                }, {
                    username: 'Loudmouthfoods'
                }]
                  });