Tags Autocomplete используется для выбора одного или нескольких значений из списка и для ввода собственных значений.

При фокусе в поле открывается меню справочника. По мере ввода меняется автодополнение. Выбор опции из списка добавляет тег, очищает текст в поле и закрывает меню.

Меню относится к Autocomplete: его ширина настраивается атрибутами panelWidth и panelMinWidth у <kbq-autocomplete> и считается по всему полю, а не по полю ввода внутри него.

Поиск разбивает многословный запрос на части и ищет их независимо друг от друга, удаляет пробелы по краям, не зависит от регистра и сворачивает диакритические знаки. Алгоритм работы описан в руководстве «Умный поиск».

На первом месте в меню автодополнения располагается опция создания нового тега. Она создаёт новый токен из введённого текста, если такого нет в словаре.

Добавление тега также работает по клавише Tab.

Создать копию выбранного тега нельзя: система покажет сообщение Ничего не найдено.

Порядок удаления тегов:

• Если есть выделенные теги, будут удалены они все.
• Если выделенных тегов нет, будет удалён тег в фокусе.

Теги можно удалить несколькими способами:

• Клик по иконке удаления (директива kbqTagRemove) внутри тега.
• Нажатие клавиши Delete или Backspace.
• Программное удаление через API компонента.

Опция удаления настраивается при помощи атрибута removable (по умолчанию включена).

Теги можно выбрать несколькими способами:

• Клик по тегу при зажатом Ctrl.
• Клик по тегу при зажатом Shift, чтобы изменить выбор диапазона от якорного тега до нажатого.
• Нажатие Shift + ← / →, чтобы расширить или сузить диапазон.
• Нажатие комбинации клавиш Ctrl+A.
• Space при фокусе на теге.
• Программный выбор через API компонента.

Мышь и клавиатура изменяют один диапазон относительно его начального тега. При сужении диапазона выбор лишних тегов снимается. Недоступные теги не изменяются.

Опция выбора настраивается при помощи атрибута selectable (по умолчанию включена).

Для включения режима редактирования необходимо установить свойство editable для kbq-tag-list или отдельного kbq-tag.

Вход в режим:

• При двойном клике по тегу.
• При нажатии клавиши Enter или F2 (при фокусе на теге).

Сохранение изменений:

• При нажатии клавиши Enter.
• При нажатии на кнопку подтверждения (директива kbqTagEditSubmit).

Отмена изменений:

• При нажатии клавиши Escape.
• При потере фокуса.

В режиме редактирования тег превращается в поле ввода и остается на той же позиции внутри контрола.

Для включения возможности перестановки тегов необходимо установить свойство draggable для kbq-tag-list.

Валидаторы вешаются на <kbq-tag-list>: контрол формы для всего списка — это именно kbq-tag-list, а поле ввода служит только для набора текста.

Отдельный [formControl] или [ngModel] на <input kbqTagInputFor> при этом остаётся нужен: kbqAutocomplete работает через него, и без него ломаются фильтрация меню и отслеживание набранного текста. Библиотека просто не учитывает валидаторы, навешанные на этот контрол.

Значение контрола — массив тегов, так что одним набором валидаторов проверяются и количество тегов, и содержимое каждого из них. Валидация одинаково распространяется на теги, выбранные из меню автодополнения, набранные вручную и вставленные из буфера обмена.

Валидаторы не запрещают добавить тег: тег добавляется, а поле переходит в состояние ошибки. Если некорректное значение не должно попадать в список, отфильтруйте его в обработчиках (kbqTagInputTokenEnd) и (optionSelected).

Момент показа ошибки задаётся через ErrorStateMatcher и по умолчанию наступает, когда контрол невалиден и при этом получил touched либо форма была отправлена.

Клавиша	Действие
Backspace / ← / Shift + Tab	Переместить фокус на последний тег.
Ctrl + A	Выделить все теги и поставить фокус на последний из них.

Клавиша	Действие
← / →	Переместить фокус на предыдущий/следующий тег.
Shift + ← / →	Изменить диапазон и переместить фокус.
Space	Выбрать/снять выбор тега.
Delete / Backspace	Удалить тег.
F2 / Enter	Начать редактирование.
Ctrl + A	Выделить все теги.
Home / End	Переместить фокус на первый/последний тег.

Клавиша	Действие
Enter	Сохранить изменения.
Esc	Отменить изменения.