Функциональность Twitter / Facebook @mention с jQuery

Question

Я пытаюсь внедрить систему @mention в приложение, которое я создаю, и сталкиваюсь с некоторыми трудностями.

Мой первоначальный подход такой:

1. Создайте два скрытых ввода после @mentionified текстовой области / ввода. Первый будет содержать искомый текст (для автозаполнения). Второй будет содержать найденные упоминания в виде @ [objectId: text].

2. Это сложнее реализовать на практике, чем можно было бы подумать. Когда кто-то нажимает символ @, мне нужно начать подачу последующего текста в автозаполнение. Мне нужно только получить текст между символом @ и курсором. Что делать, если они щелкают курсор на какой-то другой части ввода, чтобы что-то редактировать, а затем возвращаются, чтобы редактировать текст @. Сценарий должен быть достаточно умным, чтобы выполнять поиск автозаполнения только тогда, когда пользователь обновляет текст сразу после символа @.

Мысли о том, как лучше всего это реализовать? Есть ли плагин, который уже делает это?

Answer 1

Я использую это: https://github.com/podio/jquery-mentions-input

Вот демоверсия . Я думаю, что это полезно для вас.

EDIT:

Данный плагин больше не поддерживается. Этот плагин ( Иван Вирабян ) - это форк с некоторыми улучшениями: https://github.com/ivirabyan/jquery-mentions

Answer 2

Я боролся с этим сам и в итоге написал решение, которое использует скрытое поле для хранения user_id в полном контексте поста:

http://www.hawkee.com/snippet/9391/

Answer 3

Я опоздал на пару лет, и кажется, что вы, возможно, избежали «воссоздания колеса», но я решил добавить свои два цента на тот случай, если вы (OP) или кто-то еще захотят попробовать свои силы, реализуя эту функциональность с нуля.

Утилита управления "упоминанием" состоит из 3 компонентов:

1. Модуль автозаполнения : Компонент, отвечающий за получение и отображение набора элементов, которые можно использовать для создания упоминания, с учетом строки.

2. Модуль отслеживания упоминаний : компонент, отвечающий за отслеживание данных, связанных с упоминанием; Как минимум, местоположение, а также поверхностные и существенные (если они существуют) значения каждого упоминания должны отслеживаться во всех модификациях текста элемента ввода, к которому прикреплена утилита.

3. Модуль визуального разграничения упоминаний : Компонент, отвечающий за разграничение текста упоминания от остального текста в элементе ввода, к которому прикреплена утилита

Учитывая эту разбивку такой утилиты, должно стать ясно, что first и second в исходном сообщении - это те, которые могут быть предприняты при реализации упомяните модули управления и автозаполнения соответственно.

Дальнейшее изучение 3-х модулей на простом английском языке было бы утомительно; гораздо лучше смотреть на код! К счастью, я сделал решение, Mentionator , которое является надежным (более того, чем все другие решения, предлагаемые здесь), хорошо структурированным, простым в использовании и обильно прокомментированным. Так что стоит посмотреть, хотите ли вы создать оригинальное решение или справочный материал для создания собственного.

Answer 4

Я настоятельно рекомендую плагин jquery.mentionsInput.Он поддерживает теги @mention, как на Facebook, в комплекте с аватарами и локальными или ajax-данными.

http://podio.github.com/jquery-mentions-input/