Facebook jQuery autocomplete plugin for textarea & free text
Asked Answered
C

2

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

Colter answered 2/6, 2014 at 17:0 Comment(2)
Deleted my post, as I no longer think it's really what you're looking for. Best of luck finding something.Silvanus
Thanks @Chris. Also note: a live example would be going on Facebook and typing the '@[Friend]' in a status update.Colter
C
5

Found rich_textarea, which meets all the criteria.

https://github.com/Yermo/rich_textarea

Colter answered 6/6, 2014 at 22:17 Comment(2)
Did you see this: #1192307. It looks even better.Reject
@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.')Colter
M
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
Milker answered 2/7, 2016 at 23:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.