Free text input with autocomplete on special symbols

Question

I am building a chat widget that allows people to talk to each other in a web app. Most of the chat is therefore just text, but I'd like to allow people to say

which should appear in the chat as (for example)

Where typing the @ symbol allows Joe to be autocompleted from a list of users and also rendered as some sort of HTML element that isn't just text.

A great example is the tags box when asking or editing a question on StackOverflow - you can type free text which autocompletes to one or more tags; I basically want the tags to activate with a particular symbol (@ in this case) and still allow the free text otherwise. Another example is the comment reply field in StackOverflow where you can type @fooUser this is my response to your comment and fooUser becomes a link.

GitHub also does this; it provides different autocompletes for # (issue) and @ (user), i.e.:

I'm aware of libraries such as Twitter/Bootstrap typeahead and jQuery UI autocomplete, but they seem to autocomplete an entire input and are not flexible enough for doing things like this. There are two main issues here:

• What's a good way to approach the hybrid rendering of both text and arbitrary DOM elements over an input field?
• Is there an autocomplete library that supports in-line autocompletion, not just on the entire input?

I'm also fine with not rendering DOM elements in the text input/text area, but I can't find any libraries that do this type of hybrid free-text/autocomplete at all.

As an aside, I'm doing this in Meteor and so the data source for the autocomplete will be a Meteor collection. While that shouldn't affect how the data is hooked up too much, a Meteor-aware answer would be even more helpful.

Related to Twitter-style autocomplete in textarea but that question is over 2 years old with no good answers and hopefully something better has come along by now.

Answer 1

Nothing too promising turned up in an extensive canvassing of libraries, but I thought I'd write things down for reference.

I'm excluding all full-field autocompletion libraries such as Typeahead and jQuery-autocomplete since they're not really what I'm looking for.

• https://github.com/tactivos/jquery-sew (only supports one trigger)
• https://github.com/Hawkers/triggeredAutocomplete (also only one trigger)
• https://github.com/podio/jquery-mentions-input (one trigger, and unmaintained)
• http://imankulov.github.io/asuggest/ (not very complete)

At this point, I'm fairly certain there's no industrial-strength library unless GitHub decides to open-source their code :). Fingers crossed...