Я создаю чат-виджет, который позволяет людям разговаривать друг с другом в веб-приложении. Поэтому большая часть чата - это просто текст, но я бы хотел, чтобы люди говорили
который должен появиться в чате как (например)
Если ввод символа @ позволяет 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 лет без хороших ответов и, надеюсь, что-то лучше пришло к настоящему времени.
