javascript - Facebook jQuery autocomplete plugin for textarea & free text - Stack Overflow

Is there a jQuery plugin, similar to Facebook, that suggests/autopletes with this criteria:

1. Works for a textarea or contenteditable div. I'm finding many plugins that only support input fields (ex. /).
2. Supports free text, a bination of tags and non-tag text. This is an example that only allows tags after hitting enter: .js/ - This is NOT free text. Examples of free text would be At.js (.js), jquery-textplete (), and jquery.mentionsInput ()
3. Pill-like CSS effect with backspace/delete functionality. / gets pretty close but the styling example doesn't have the delete functionality found in other plugins. Example 1 has a good remove functionality.

Here is an example from Zapier that does it well:

Is there a jQuery plugin, similar to Facebook, that suggests/autopletes with this criteria:

1. Works for a textarea or contenteditable div. I'm finding many plugins that only support input fields (ex. http://loopj./jquery-tokeninput/).
2. Supports free text, a bination of tags and non-tag text. This is an example that only allows tags after hitting enter: http://brianreavis.github.io/selectize.js/ - This is NOT free text. Examples of free text would be At.js (http://ichord.github.io/At.js), jquery-textplete (http://yuku-t./jquery-textplete), and jquery.mentionsInput (http://podio.github.io/jquery-mentions-input)
3. Pill-like CSS effect with backspace/delete functionality. http://yuku-t./jquery-textplete/ gets pretty close but the styling example doesn't have the delete functionality found in other plugins. Example 1 has a good remove functionality.

Here is an example from Zapier that does it well:

• javascript
• jquery
• textarea
• jquery-autoplete
• jquery-tokeninput

Share Follow edited Jun 2, 2014 at 18:19 Chandrew asked Jun 2, 2014 at 17:00 ChandrewChandrew 17.3k44 gold badges2525 silver badges4040 bronze badges 2

• Deleted my post, as I no longer think it's really what you're looking for. Best of luck finding something. – Chris Commented Jun 2, 2014 at 18:32
• Thanks @Chris. Also note: a live example would be going on Facebook and typing the '@[Friend]' in a status update. – Chandrew Commented Jun 5, 2014 at 20:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Found rich_textarea, which meets all the criteria.

https://github./Yermo/rich_textarea

Even though you've found a plug-in which suits your needs, I figured I'd suggest an alternative (for you, and anybody that may stumble upon this). The more the merrier, right?

Mentionator exceeds* all of your requirements, and is also lighter, and patible across a greater number of browsers (with it being able to be affixed to <textarea> elements) than rich_textarea (the subject plug-in of the accepted answer at the time of this post).

I should probably mentioned that Mentionator is maintained by yours truly :) .

*Mentionator provides doesRecognizeDelimitedSubstrings and delimValue options, which are described in the Mentionator documentation as:

doesRecognizeDelimitedSubstrings: 
    A boolean which, if defined as true, will allow the external value
    of a mention, herein called "mentionExternalValue", to sustain
    modifications so long as the result of each such modification 
    is in mentionExternalValue.split(delimValue)

delimValue: 
    A string, or regular expression representing the set of strings,
    that, given doesRecognizeDelimitedSubstrings === true, delimit
    mentionExternalValue substrings that can also serve as external
    value of the mention if yielded by a modification of
    mentionExternalValue