Атрибут data-tagselector является инициатором для обработки формы при получении фокуса, однако помимо атрибутов, вы можете инициализировать обработку через javascript.
data-tagselector-keys
Клавиши, по нажатию на которые тег будет добавляться в список. В качестве разделителя можно использовать символ "+".
data-tagselector-unique
Должны ли теги быть уникальными. По умолчанию true.
data-tagselector-insert
Куда будет вставлен тег. Принимаются значения start(вначале) и end(вконце).
По умолчанию start.
data-tagselector-min
Минимальное кол-во символов, которое необходимо ввести для добавления тега. По умолчанию 1.
data-tagselector-max
Максимальное кол-во символов, которое можно ввести для добавления тега.
По умолчанию 32.
data-tagselector-max-tags
Максимальное кол-во тегов, которое можно добавить. По умолчанию 0 (без лимита).
data-tagselector-pattern
Паттерн регулярного выражения, которому должен соответствовать тег.
Javascript
Больше возможностей для управления тегами можно достичь благодаря Javascript.
Инициализация
Для инициализации, необходимо создать экземпляр класса PipUI.Tagselector. Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object
Первый параметр - селектор или объект формы ввода
Второй параметр - объект опций
<input type="text" class="input" id="tagselector">
<script>
let tagselector = new PipUI.Tagselector('#tagselector');
</script>
Опции
// Выводить в консоль отладку
debug: false
// Минимальное кол-во символов для добавления тега.
min: 1
// Максимальное кол-во символов для добавления тегов.
max: 32
// Максимальное кол-во тегов для добавления.
maxTags: 0
// Паттерн регулярного выражения, которому должен соответствовать добавляемый тег.
pattern: undefined
// Куда будет вставлен тег вначале или вконце - start или end соответственно.
insert: 'start'
// Значения с которыми будет инициализирована форма
values: []
// Клавиши, по нажатию на которые тег будет добавлен
keys: [',', 'Enter']
// Должны ли теги быть уникальными
unique: true
// Имя скрытого поле в котором записаны все теги
hidden: 'tags'
// Функция обратного вызова, срабатываетая при добавлении тега вконец
pushCallback: undefined
// Функция обратного вызова, срабатываетая при добавлении тега вначало
unshiftCallback: undefined
// Функция обратного вызова, срабатываетая при очистке тегов
clearCallback: undefined
// Функция обратного вызова, срабатываетая при изменении тега
setCallback: undefined
// Функция обратного вызова, срабатываетая при удалении тега
removeCallback: undefined
// Функция обратного вызова, срабатываетая при обновлении списка тегов
updateCallback: undefined
// Функция обратного вызова, срабатываетая при получении ошибки
errorCallback: undefined
// Класс контейнера списка тегов
tagselectorClass: 'tagselector'
// Шаблоны селектора
templates: {
// Основной контейнер списка тегов
container: '...',
// Элемент тега
tag: '...'
}
Методы
let tagselector = new PipUI.Tagselector('#tagselector');
tagselector.getID() // Вернет уникальный идентификатор
tagselector.setOptions(object) // Изменить опции
tagselector.getOptions() // Получить опции
tagselector.add(string, callback) // Добавить тег в список
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
tagselector.push(string, callback) // Добавить тег вконец списка
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
tagselector.unshift(string, callback) // Добавить тег вначало списка
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
tagselector.set(id, string, callback) // Изменить тег
// Параметр id хранится в атрибуте data-tagselector-item-id каждого тега
// Параметр string - строка, на которую будет заменено содержимое тега
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
tagselector.remove(id, callback) // Удалить тег
// Параметр id хранится в атрибуте data-tagselector-item-id каждого тега
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
tagselector.clear(callback) // Удалить все теги
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
tagselector.search(string) // Поиск тега
События
Триггер
Описание
Инициатор
push-tagselector-pipui
Срабатывает при добавлении тега вконец
.tagselector-input
unshift-tagselector-pipui
Срабатывает при добавлении тега вначало
.tagselector-input
set-tagselector-pipui
Срабатывает при изменении тега
.tagselector-input
remove-tagselector-pipui
Срабатывает при удалении тега
.tagselector-input
clear-tagselector-pipui
Срабатывает при очистке
.tagselector-input
Совместимость
Вы так же можете использовать селектор тегов совместно с автозаполнением
<input type="text" class="input" id="tagselector" data-autocomplete-list="test;example;lorem;ipsum">
<script>
let tagselector1 = new PipUI.Tagselector('#tagselector');
let autocomplete = new PipUI.Autocomplete('#tagselector', {
choiseCallback: (self, item) => { self.input.value = ''; tagselector1.add(item.innerHTML); }
});
</script>
