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.
