Enabling mention autocomplete support on BuddyPress compose message screen
I just saw a comment from one of our members, who wanted to have the BuddyPress @ mentions support enabled in the message compose screen. Since the code was a little more than what I could post in the comment, so here is the complete code.
Step 1:- Load mentions js file on compose screen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /** * @param boolean $load * @param $mentions_enabled * @return boolean enabled ot not? */ function buddydev_enable_mention_autosuggestions_on_compose( $load, $mentions_enabled ) { if ( ! $mentions_enabled ) { return $load;//activity mention is not enabled, so no need to bother } //modify this condition to suit yours if( is_user_logged_in() && bp_is_messages_compose_screen() ) { $load = true; } return $load; } add_filter( 'bp_activity_maybe_load_mentions_scripts', 'buddydev_enable_mention_autosuggestions_on_compose', 10, 2 ); |
Step 2:- Enable Javascript
Put this line inside the document ready block of your theme's js file
1 2 3 | if ( jQuery( '#message_content').get( 0 ) ) { jQuery('#message_content').bp_mentions( bp.mentions.users ); } |
That's all.
Here is what I get when I try to mention.
Go ahead and add it now:)
PS: This tutorial just shows a specific use case based on our previous tutorial for enabling autocomplete support anywhere.
Hey, this works great, however, I am still having a slight issue. I modified the code to post to
so that I could use autocomplete in specifying a message recipient. However, the recipient field does not require an @ symbol, while the autocomplete does add the @ symbol. Is there a way to change the behavior of the recipient field to accept (or possibly ignore) an @ symbol?
Hi Andrew,
you don't need to do that for the recipients. BuddyPress does that automatically. Just type the name and you will have suggestions. If it is not happening, It is mostprobably an issue with your theme or other plugin conflicting. Please check that.
Which files I put those two codes? Are two of them in js file or one is in bp-custom and another in one js theme file?
The php code goes in the bp-custom.php and the js code(2nd snippet) in the javascript file.
Hope that helps.
Hey, great tip thanks! Is there a way to style the @user text within the message form? Right now, it's not obvious that the message is addressed to someone. I'd like the @user to turn say blue for exemple, once selected. Any idea?
Thanks!
Sorry, Can't be done in plain textarea. You can not modify the colour of a substring inside a textarea. If you are using a rich text editor, then it will be easy.