Свободный ввод текста с автозаполнением по специальным символам

Я создаю чат-виджет, который позволяет людям разговаривать друг с другом в веб-приложении. Поэтому большая часть чата - это просто текст, но я бы хотел, чтобы люди говорили

который должен появиться в чате как (например)

Если ввод символа @ позволяет Joe быть автозаполненным из списка пользователей, а также отображаться как некоторый элемент HTML, который не является только текстом.

Отличным примером является поле тегов при запросе или редактировании вопроса в StackOverflow - вы можете ввести бесплатный текст, который автоматически заполняется одним или несколькими тегами; В основном я хочу, чтобы теги активировались с определенным символом (@ в этом случае) и по-прежнему допускают свободный текст в противном случае. Другим примером является поле ответа комментариев в StackOverflow, где вы можете ввести @fooUser this is my response to your comment и fooUser становится ссылкой.

GitHub также делает это; он предоставляет различные автозаполнения для # (выпуск) и @ (пользователь), то есть:

Я знаю библиотеки, такие как Twitter/Bootstrap typeahead и автозаполнение jQuery UI, но они, похоже, автозаполняют весь ввод и недостаточно гибки для выполнения подобных действий. Здесь есть два основных вопроса:

• Каким образом можно подойти к гибридному рендерингу как текстовых, так и произвольных элементов DOM в поле ввода?
• Есть ли библиотека автозаполнения, которая поддерживает автозавершение в строке, а не только на весь вход?

Я также прекрасно разбираюсь в том, что элементы DOM не отображаются в области ввода текста/текста, но я не могу найти библиотеки, которые вообще делают этот тип гибридного свободного текста/автозаполнения.

В стороне, я делаю это в Meteor, и поэтому источником данных для автозаполнения будет Meteor collection. Хотя это не должно влиять на то, как данные подключены слишком сильно, ответ, поддерживающий Метеор, будет еще более полезным.

Связано с автозаполнением в стиле Twitter в текстовом поле, но этот вопрос старше 2 лет без хороших ответов и, надеюсь, что-то лучше пришло к настоящему времени.

Ответы

Ответ 1

Для этого стоило создать пакет Meteor:

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

Синхронизация данных на стороне клиента в Meteor делает это действительно мощным и действительно гибким. Поддерживаются многочисленные правила сопоставления и рендеринг пользовательского списка с использованием шаблонов:

Упоминание пользователей, где онлайн-пользователи отображаются зеленым:

Упоминание чего-то еще, а также некоторые показанные метаданные

Подробнее см. ссылку. Пожалуйста, вилку, потяните и улучшите!

Ответ 2

Ничего слишком многообещающего не появилось в обширной агитации библиотек, но я думал, что напишу для справки.

Я исключаю все полнотекстовые библиотеки автозаполнения, такие как Typeahead и jQuery-autocomplete, так как они не совсем то, что я ищу.

• https://github.com/tactivos/jquery-sew (поддерживается только один триггер)
• https://github.com/Hawkers/triggeredAutocomplete (также только один триггер)
• https://github.com/podio/jquery-mentions-input (один триггер и не поддерживается)
• http://imankulov.github.io/asuggest/ (не очень полно)

На этом этапе я вполне уверен, что нет библиотеки промышленной силы, если GitHub не решит открыть свой код:). Пальцы пересекли...