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

It was worth creating a Meteor package for this purpose:

https://github.com/mizzao/meteor-autocomplete

The client-side data synchronization in Meteor makes this both really powerful and really flexible. Multiple matching rules and custom list rendering using templates are all supported:

Mentioning users, where online users are rendered in green:

Mentioning something else, along with some metadata shown

See the link for more details. Please fork, pull, and improve!