6

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

  1. Works for a textarea or contenteditable div. I'm finding many plugins that only support input fields (ex. http://loopj.com/jquery-tokeninput/).
  2. Supports free text, a combination 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-textcomplete (http://yuku-t.com/jquery-textcomplete), and jquery.mentionsInput (http://podio.github.io/jquery-mentions-input)
  3. Pill-like CSS effect with backspace/delete functionality. http://yuku-t.com/jquery-textcomplete/ 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:

Zapier

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

2 Answers2

6

Found rich_textarea, which meets all the criteria.

https://github.com/Yermo/rich_textarea

Chandrew
  • 16,987
  • 4
  • 24
  • 40
  • Did you see this: http://stackoverflow.com/questions/1191807/facebook-style-jquery-autocomplete-plugin?rq=1. It looks even better. – serraosays Jun 07 '14 at 00:11
  • 1
    @staypuftman Yes, but it's not exactly like your Facebook status update. Most of those are limited to input field elements or tags without miscellaneous text (only allowing 'tags'). It's not what I imagine when I think of a Facebook status update where I can select a friend's name, then write the rest of my message. Like many other plugins, it looks like jquery-tokeninput only supports input fields & only allows tags (i.e. I can't start typing 'I love The Simpsons.') – Chandrew Jun 07 '14 at 18:05
0

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 compatible 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
Kevin
  • 2,617
  • 29
  • 35