Как создать автозаполнение @mentions с помощью jQuery и AtWho

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

1. Включите AtWho.js

Каждый разработчик знает Github, и это система полезных проблем, ну, atwho.js — это библиотека автозаполнения для автозаполнения упоминаний, смайликов и т. Д., Как вы делаете это на веб-сайте Github в любой области текста. At.js зависит от Библиотека Caret.js, это обеспечивает точную обработку позиции курсора во время любого из событий, вызванных библиотекой.

Сказав это, для использования библиотеки вам понадобится как минимум:

jQuery> = 1.7.0.
Caret.js (Ты можешь использовать Component или же Bower установить его или скачать копию минимизированного кода здесь)

Вам нужно будет включить как минимум 3 JS-файла и 1 CSS-файл, чтобы плагин работал, базовый стиль CSS, который также можно найти в репозитории:

Автозаполнение работает с элементами textareas в Chrome, Safari, Firefox, IE7 + (возможно, IE6) и, если вы используете его внутри элементов contentEditable в Chrome, Safari, Firefox, IE9 +. Для получения дополнительной информации об этой библиотеке, пожалуйста, не забудьте посетите официальный репозиторий на Github здесь. Наиболее известные особенности плагина:

Поддержка IE 7+ для TextArea.
Поддерживает HTML5 contentEditable элементы (НЕ включая IE 8)
Можно слушать любого персонажа, а не только «@». Можно настроить несколько слушателей для разных персонажей с разным поведением и данными
События слушателя могут быть связаны с несколькими входами.
Форматирование возвращаемых данных с использованием шаблонов
Клавиатура управления в дополнение к мыши
- Tab или же Enter клавиши выбирают значение
- Up а также Down перемещаться между значениями (и Ctrl-P а также Ctrl-N также)
- Right а также left будет повторно искать ключевое слово.
Пользовательские обработчики данных и средства визуализации шаблонов, использующие группу настраиваемых обратных вызовов
Поддерживает AMD

2. Использование автозаполнения

Использование автозаполнения очень просто и может быть легко понято на примерах:

Основное пользовательское автозаполнение

Наиболее часто используемый пример — автозаполнение упоминания пользователя, которое может быть вызвано, когда пользователь вводит @, затем появляется автозаполнение, и пользователь может либо выбрать пользователя из списка, либо просто ввести его имя, пока он не будет отфильтрован, а затем нажать ENTER, TAB или щелкнуть выбранный элемент:


$('#your-input').atwho({
at: "@",
data:['Hans', 'Peter', 'Tom', 'Anne']
});

Использование элемента contentEditable

Вместо использования textarea, вы можете использовать его внутри div, который реализует contenteditable имущество:


$('#your-input').atwho({
at: "@",
data:['Hans', 'Peter', 'Tom', 'Anne']
});

Многократное автозаполнение (пользователь и смайлики)

Если вы хотите реализовать несколько автозаполнений в одном входе, вы можете добиться того, чтобы каждый инициализатор использовал разные свойства at, например : а также @:


// Create Emojis Structure
var emojis = $.map([
"smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
"a", "ab", "airplane", "alien", "ambulance", "angel", "anger", "angry",
"arrow_forward", "arrow_left", "arrow_lower_left", "arrow_lower_right",
"arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right",
"art", "astonished", "atm", "b", "baby", "baby_chick", "baby_symbol",
"balloon", "bamboo", "bank", "barber", "baseball", "basketball", "bath",
"bear", "beer", "beers", "beginner", "bell", "bento", "bike", "bikini",
"bird", "birthday", "black_square", "blue_car", "blue_heart", "blush",
"boar", "boat", "bomb", "book", "boot", "bouquet", "bow", "bowtie",
"boy", "bread", "briefcase", "broken_heart", "bug", "bulb",
"person_with_blond_hair", "phone", "pig", "pill", "pisces", "plus1",
"point_down", "point_left", "point_right", "point_up", "point_up_2",
"police_car", "poop", "post_office", "postbox", "pray", "princess",
"punch", "purple_heart", "question", "rabbit", "racehorse", "radio",
"up", "us", "v", "vhs", "vibration_mode", "virgo", "vs", "walking",
"warning", "watermelon", "wave", "wc", "wedding", "whale", "wheelchair",
"white_square", "wind_chime", "wink", "wink2", "wolf", "woman",
"womans_hat", "womens", "x", "yellow_heart", "zap", "zzz", "+1",
"-1"
], function(value, i) {
return {
key: value,
name:value
};
});
var EmojiSettings = {
at: ":",
data: emojis,
displayTpl: "${name} ",
insertTpl: "",
insertTpl: ':${key}:',
delay: 400
};
var UserSettings = {
at: "@",
data:['Hans', 'Peter', 'Tom', 'Anne']
};
// Initialize Emojis and User Settings on the same autocomplete field
$('#your-input').atwho(EmojiSettings).atwho(UserSettings);

Живой пример

Поиграйте со следующей скрипкой, которая реализует полезное автозаполнение для написания смайликов, упоминания какого-либо пользователя или завершения города: