angularjs : @mention in textarea

Question

I want to display an autocomplete form triggered by the word @ in my textarea like this library http://ichord.github.io/At.js/ but only using angularjs & css

What kind of directive should I write ? Also, is there a way to implement this with the angular bootstrap UI typehead directive ?

Solution 1

See https://github.com/jeff-collins/ment.io for a directive that likely does what you are looking for.

Solution 2

I've written angular-otobox, a dependency-less angular directive for mentioning, tagging and higlighiting words in text, it's easy to use. have look, it's easy to use.

Solution 3

I wrote a script for my needs (not AngularJS), but also might help achieving what you are looking for.

HTML:

<div id="wrapper">
    <div id="input-box" contenteditable="true"></div>
    <div id="mention-select-choices" class="hidden"></div>
</div>

To see the JS part, got to JSFiddle link: https://jsfiddle.net/hsjqzkt3/6/

The script supports predefined list of names, auto-completion, custom style, special characters and many more.

Also, possible to be easily converted to AngularJS if needed.

Solution 4

AngularJs is quite outdated. please refer below dependencies for Angular 2+ versions:

• angular-mentions
• ngx-mention

View more solutions

Comments

[Reyraa]

wellcome, feel free to ask if any problems

[Reyraa]

@BobbyShark I've used that. adds popup templates to document in the number of textarea (input)s in page, In my case, more than 100 on a single page. And also menus remain in page even when route changes! not a good idea.

[Bobby Shark]

@alihaghighatkhah Thank you I'll give it a try. I used ment.io so far and had to tweak it a bit for my needs. I'll give you feedback on your project

[Reyraa]

@BobbyShark Thanks bobby, I'll wait for that

[Bobby Shark]

@alihaghighatkhah I'm trying to use your project but I can't get it work.. Have you an example page to see how to setup it correctly? I used <script src="../../js/otobox.js"></script><script src="../../js/angular-otobox.js"></script> along with the css and added angular-otobox in the angular module config

[Reyraa]

@BobbyShark plus these, you need to add angular-otobox to dependencies of your app, also otoboxConfig directive containing settings of your activator(s).Try like these and I'll try creating a codepen ASAP

[Bobby Shark]

@alihaghighatkhah Yes that's what I've done. I haven't used config directives, only <textarea otobox="mention.array"> etc... But can't get it work.. Also does the otobox-source allow to use array ?

[Reyraa]

@BobbyShark I made a codepen: codepen.io/alihaghighatkhah/pen/ZYmKvQ. hope it helps

[Bobby Shark]

@alihaghighatkhah thank you but this isn't working at all. Error: otobox - Name, key and source fields are mandatory for activator object. Plus the lack of documentation, I will keep with ment.io

[Reyraa]

@BobbyShark It's a little wired, cause I checked and it works in all browsers, no errors. Let me know if I could be of any assistance.

[Bobby Shark]

@alihaghighatkhah I tested on Firefox ubuntu version. Will test on a proper new project on win7 and give u feedback tomorrow ok. Thanks for your help

[ericpeters0n]

@alihaghighatkhah -- Lack of example code makes this pretty tough to understand, fyi. Perhaps create a (working) Plunkr? The codepen doesn't run in Chrome.

[Juan Solano]

@alihaghighatkhah a demo would be nice