Текстовое поле обновления статуса в стиле jQuery + Facebook - автозаполнение ссылок на профили - PullRequest
2 голосов
/ 19 февраля 2010

У меня есть сайт социальной сети с текстовым полем обновления статуса, очень похожий на Facebook. Однако я также хотел бы, чтобы пользователь мог вводить символ @ при наборе нового статуса, который вызывает опцию автозаполнения профилей друзей (опять же, как в Facebook).

Когда пользователь выбирает один, он должен быть включен в статус как ссылка на профиль этого человека.

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

Например, я могу напечатать: «Сегодня я просматривал профиль @Paul Hinett и заметил, что он дружит с @Jack»

2 имени профиля должны быть ссылками.

Надеюсь, кто-нибудь может помочь!

Ответы [ 2 ]

0 голосов
/ 03 июля 2016

Эти токены, созданные в Facebook, когда кто-то ссылается на друга в окне создания статуса, неофициально известны как , упоминает или теги .

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

Если, с другой стороны, вас интересует, как создается такая утилита, читайте дальше.

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

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

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

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

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

* Важно отметить, что реализация такого средства в Facebook не превращает упоминания в ссылки во время создания статуса, как я и предполагал.Вместо этого текст статуса отправляется на серверы Facebook с (возможно, встроенными) данными, которые указывают местоположение каждого упоминания в статусе.Когда статус должен быть доставлен с серверов пользователю, вышеупомянутые данные о местоположении используются для создания версии текста с «связанным» текстом упоминания.

** АвтозаполнениеМодуль Mentionator - это виджет автозаполнения пользовательского интерфейса jQuery, источник которого не включен в Mentionator.

0 голосов
/ 06 января 2011

Этот плагин является частичным решением: https://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

...