Селектор тегов

Общая информация

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

По умолчанию в качестве разделителей используются запятая или клавиша ENTER.

Все полученные результаты помещаются в скрытое поле ввода (по умолчанию name="tags").

Разметка

<input type="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

Первый параметр - селектор или объект формы ввода

Второй параметр - объект опций

<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>