> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/tag-selector.md).

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

## Общая информация <a href="#general-information" id="general-information"></a>

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

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

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

### Разметка

```html
<input type="text" class="input" data-tagselector>
```

{% embed url="<https://codepen.io/pipui/pen/JjmKYWP>" %}
Пример работы кода выше
{% endembed %}

## Атрибуты

Атрибут <mark style="color:orange;">`data-tagselector`</mark> является инициатором для обработки формы при получении фокуса, однако помимо атрибутов, вы можете инициализировать обработку через 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

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

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

```html
<input type="text" class="input" id="tagselector">

<script>
    let tagselector = new PipUI.Tagselector('#tagselector');
</script>
```

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
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: '...'
}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
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) // Поиск тега
```

### События

<table><thead><tr><th>Триггер</th><th width="351.3333333333333">Описание</th><th>Инициатор</th></tr></thead><tbody><tr><td>push-tagselector-pipui</td><td>Срабатывает при добавлении тега вконец</td><td>.tagselector-input</td></tr><tr><td>unshift-tagselector-pipui</td><td>Срабатывает при добавлении тега вначало</td><td>.tagselector-input</td></tr><tr><td>set-tagselector-pipui</td><td>Срабатывает при изменении тега</td><td>.tagselector-input</td></tr><tr><td>remove-tagselector-pipui</td><td>Срабатывает при удалении тега</td><td>.tagselector-input</td></tr><tr><td>clear-tagselector-pipui</td><td>Срабатывает при очистке</td><td>.tagselector-input</td></tr></tbody></table>

### Совместимость

Вы так же можете использовать селектор тегов совместно с [автозаполнением](/components/autocomplete.md)

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