At.js — удобное автодополнение для веб-приложений

Знакомьтесь: библиотека, которая упрощает ввод

Помните, как удобно в GitHub упоминать коллег через символ @ и видеть подсказки? Библиотека At.js позволяет добавить такой же функционал в любой веб-проект. Хотя проект больше не поддерживается (автор рекомендует использовать zurb tribute), его 5.2k звезд на GitHub говорят о востребованности решения.

Кому пригодится At.js

Библиотека идеально подойдет разработчикам, которые:

• Создают чаты и соцсети
• Разрабатывают корпоративные мессенджеры
• Хотят улучшить UX форм ввода
• Ищут легкое решение для автодополнения

Главные возможности

1. Гибкость триггеров

At.js реагирует не только на @, но и на любой указанный символ. Можно настроить несколько триггеров с разным поведением.

$('#input').atwho({
    at: "#", // Теперь срабатывает на решетку
    data: ['tag1', 'tag2', 'tag3']
})

2. Поддержка разных элементов ввода

Работает как с обычными textarea, так и с contentEditable-элементами. Поддерживает даже IE7+ для textarea!

3. Удобное управление с клавиатуры

• Tab/Enter — выбрать значение
• Стрелки вверх/вниз — навигация
• Ctrl+P/Ctrl+N — альтернативная навигация

4. Кастомизация через шаблоны

Можно гибко настраивать отображение подсказок с помощью шаблонов.

Технические особенности

At.js:

• Написана на CoffeeScript
• Зависит от jQuery (от 1.7.0) и Caret.js
• Поддерживает AMD
• Доступна через Bower (jquery.atwho) и Component (ichord/At.js)

Для подключения достаточно:

<link href="css/jquery.atwho.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.caret.js"></script>
<script src="js/jquery.atwho.js"></script>

Где можно применить

1. Социальные функции — упоминания пользователей
2. Системы тегирования — автодополнение хэштегов
3. Корпоративные чаты — быстрый поиск коллег
4. Системы комментариев — удобное цитирование

Вывод: стоит ли использовать?

Хотя проект больше не поддерживается, он остается работоспособным решением для быстрого внедрения автодополнения. Для новых проектов лучше рассмотреть рекомендованный аналог — zurb tribute. Но если вам нужно простое решение «здесь и сейчас» — At.js справится с задачей.

Попробуйте демо: http://ichord.github.com/At.js