Free text input with autocomplete on special symbols

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

enter image description here

which should appear in the chat as (for example)

enter image description here

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.:

enter image description here

enter image description here

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.



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:

enter image description here

Mentioning something else, along with some metadata shown

enter image description here

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...


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.