Add auto-complete dropdown box for usernames

I created a suggestions submodule in order to get a dropdown list of users while writting. I don't know if it must be a submodule or a new module, but for my purposes, is working well as a submodule. I think it can be a start point to show a dropdown list of user suggestions. I think that it can be extended to support any entity, but I not dived deeper.

The submodule must be copied inside de Mentions directory. I have not created a patch because I don't know if the correct way is to implement a new module or as a submodule but, It can be possible to create if this is good for someone.

The submodule must be activated sepparettly from Mentions.

It integrates with Realname and User Relationships modules and added some permissions.

• UR Integration: Only shows users that are related to the logged in user who is writting on the box. if no UR is installed the dropdown will show all users (limited by a number of suggestions)
• Realname integration: Shows the realname of the user on the dropdown if the module is installed.
• Permissions: Allow or disallow to use of suggestions.

I get a lot of code from Facebook-style Statuses Tag Suggestions.
At the moment, it works only for comments body fields. I think that can be applied to any text field using the hook_form_FORM_ID_alter() in order to add the javascript, the css and the div where the dropdown will show. It will apply at ".form-textarea:first" selector of the form FORM_ID.

function suggestions_form_FORM_ID_alter(&$form, &$form_state) {
  if (!user_access('use mentions suggestions')) {
    return;
  }
  $path = drupal_get_path('module', 'mentions');
  drupal_add_js($path . '/suggestions/suggestions.js');
  drupal_add_css($path . '/suggestions/suggestions.css');
  $form['suggestions'] = array(
    '#type' => 'markup',
    '#markup' => '<div class="mentions-suggestions" style="display: none;"></div>',
    '#weight' => 1000,
  );
}

Hope this helps someone and we all together can clean and optimize the code.

Similar to something that @eidoscom did, I created a CKEditor mentions plugin module which allow creating @mentions in a "Facebook-like" manner, including suggestions of names based on what you type. It integrates with realname and views.

Hi @askibinski, as my solution is not polished and is not working I'm going to try your solution ;) It seems a more general one! Thanks!

It works with ckeditor 3.6??

@eidoscom I didn't test with CKEditor 3.x and I think it won't work with it. That version probably uses a different method to add plugins.

I actually have a sandbox on github which has the functionality to replace an @username with the actual username. I was thinking of building in filter format functionality that would replace the username with a themed (linked) username.

Whilst the sandbox isn't finished just yet (it's real close) I'd consider merging the functionality with the mention module to provide autocomplete functionality in this module.

Link to the github project...

The github project as it stands will now autocomplete @usern to User Name. This could be easily tweaked on line 190 to read:

text = text.replace(this.tag_user.tagged_user, "[@" + $(this.selected).data('autocompleteValue') + "]");

which I believe would work with this module. If I get time over the next few days I'll patch it in otherwise it's all there for someone else to do!

Just a quick note to indicate that my team has polished a "mentions_suggestions" module, based on the initial work by eidoscom in his suggestion.zip attachment in comment #1.

We will make this work available if there is some interest.

Hi cedric, I will be happy if you can post here your polished version of mentions_suggestions. I will get a try because my version generates some errors and I not dedicated time to solve them.

Thanks a lot ;)

I made the code available in a sandbox here:
https://drupal.org/sandbox/cedric/2053111

I believe this feature is pretty important for the Mentions module, and that most users will expect it to just work out of the box. Thus, I propose it should be included in the main Mentions project and not as a seperate project. It could be a bundled sub-module, so it can be easily enabled/disabled.

@cedric: I've downloaded your sandbox module, and enabled it along with mentions (and I've enabled the mentions text filter), but I'm not getting any functionality... does anything special need to be done to get your module to work?

Does the basic mentions module work? Get it to work first, then mentions autocomplete should work automatically.

@cedric: I just installed your module, and mentions autocomplete isn't working for me. I'll dig into your code when I get a chance, but I thought I'd let you know it's not working 100%. And the regular mentions module seems to be working fine.

If it makes a difference, I did alter the input filter so that you can simply type @username instead of [@username], as most users aren't going to be familiar with using brackets for mentions.

I love the idea, but I was not able to make this module work myself.

I did note that you had to put it inside of the Mentions module, which would be fine for a submodule but not so much for a sandbox/seperate module.
I also noticed that it won't work at all with Wysiwygs like CKEditor at the moment.

I think this absolutely belongs as a part of this module, so I hope that sometime in the future I can revisit this.

I can confirm that the ckeditor_mentions module mentioned in #2 and #5 works together with mentions (my only issue being #2228035). It is seemingly the only option to have mentions in CKEditor with both auto-suggestion and notifications (which is missing in ckeditor_mentions itself so far).

Having spent a small amount of time looking into this code it doesn't look like it is tailored for Mentions at all, rather adapted from some generic JS. Not to say that that's a bad thing, but rather it could be made to be a lot better.

My biggest concern with moving forward with this functionality is two part: JS functionality causes no end of conflict with other JS based functionality (support for no-end of Wysiwygs and other customisations to the editor region) and any form of UI should be consistent.

However, with that in mind, I want/need this functionality and will definitely be moving forward atleast using this issue as the inspiration for whatever the end result is. I won't be concentrating on Wysiwyg support however, not to say that it won't be considered in the future, but I don't currently need support for Wysiwygs nor do I enjoy working with Wysiwygs.

@Deciphered: any chance we could put our heads together and come up with a solution that could be extended to work with WYSIWYGs? I can definitely understand the headache involved, but I'm personally looking for a solution that would work with Ckeditor, so I'd be interested in contributing a solution for that WYSIWYG, at least. The best would be some sort of hook that I could invoke from a Ckeditor plugin, as far as I know (which admittedly isn't very much right now hahah).

The ckeditor_mentions plugin uses a Drupal view for that purpose, so that could be a starting point …

@tanius/@bobojo,

I think there is definitely benefit looking at the CKEditor Mentions modules, but it is worth noting that it has no relation to this module, it is purely a plugin to CKEditor that uses a similar style Mention display, but doesn't actually do anything with said Mention.

Of it where to respect the users desired Mention style as defined in the Mentions module it could be a solution, but as I said, WYSIWYG is not my current priority so I can't confirm but spend the time trying to improve those two modules.

I'll be playing more with this as soon as the core functionality of Mentions is back on track in D7.

Initial functionality committed to dev release; uses the jQuery textcomplete library (https://github.com/yuku-t/jquery-textcomplete) and respects the configuration of the input prefix/suffix of Mentions on your site.

Additional functionality to come soon, the ability for the query behind the autocompletion to be customised (currently its an EntityFieldQuery) as well as the ability to customize what is shown in the dropdown.

Added access checks and other improvements.

Going to mark as fixed for the moment, with additional improvements to come to a new issue when relevant.

I am using the dev version of this module, but this commit is breaks the CKeditor on my site. The screenshot is attached, you can see the JavaScript error.

Seems more likely that the Textcomplete library isn't loading correctly. Can you confirm that the textcomplete library js is loaded?

Thank you for your perception, I was inattentive. The patch works well.

Thank you everybody for your contributions thus far, this work is making mentions far more usable.

I have it installed and working when logged in to the admin UI (D7 ember theme) as administrator, but it is not working for normal users logged into the front end (d7 bootstrap 3). I've done some basic troubleshooting and can't find any obvious culprits, so wanted to do some sanity checks before going too much further.

I have confirmed that the textcomplete library is loading properly in both environments, and in both environments the text format is the same (plain text).

Quick questions:

1) Should this be working with the D7 Bootstrap 3 theme, using jQuery 1.9?
2) Are there any role/permissions that need to be set (other than on text formats)?
3) Should this be working with plain text?

Thanks again-

More info to inform my comment #28 above.

Console from the bootstrap 3 (non-working) environment:

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.textcomplete.min.js:2
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery.min.js:3
Empty string passed to getElementById(). jquery.min.js:3

Console from the ember 7 (working) environment:

Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.textcomplete.min.js:2
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery.min.js:3

The "empty string" line appears to be triggered by typing in the text field where the suggestions should be.

@jweirather seem t be having the same problem. Has anyone been able to solve this?

For those looking towards extending the current auto-complete feature (based on jQuery textcomplete) to also work inside CKEditor: currently, there are unresolved issues with this, discussed here. But there is not-yet-integrated, promising code to enable this here.