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:
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.
It was worth creating a Meteor package for this purpose:
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!
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.
At this point, I'm fairly certain there's no industrial-strength library unless GitHub decides to open-source their code :). Fingers crossed...
©2020 All rights reserved.