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

## Общая информация <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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/tag-selector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.