Селектор тегов помогает осуществить выборку ключевых слов или предложений.
По умолчанию в качестве разделителей используются запятая или клавиша ENTER.
Все полученные результаты помещаются в скрытое поле ввода (по умолчанию name="tags").
Разметка
<inputtype="text"class="input"data-tagselector>
Атрибуты
Атрибут 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
// Выводить в консоль отладку
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 =newPipUI.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) // Поиск тега
События
Совместимость
Вы так же можете использовать селектор тегов совместно с автозаполнением