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

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

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

Все полученные результаты помещаются в скрытое поле ввода. По умолчанию атрибут name данного поля имеет значение tags, которое можно поменять через атрибут data-ts в поле ввода.

```html
<input type="text" data-ts value="example,overflow,test" placeholder="Введите теги">
```

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

Некоторые из параметров, передаваемых обработчику, можно задать через атрибут\ <mark style="color:orange;">`data-ts-*`</mark>. Так, например, <mark style="color:orange;">`data-ts-separator`</mark> - задает разделить предустановленного значания value, <mark style="color:orange;">`data-ts-min`</mark> - минимальную длину тега, <mark style="color:orange;">`data-ts-max`</mark> - максимальную длину тега, <mark style="color:orange;">`data-ts-name`</mark> - имя результирующего поля, <mark style="color:orange;">`data-ts-position`</mark> - позиция куда будут добавляться теги (start - вначале, end - вконце), <mark style="color:orange;">`data-ts-mintags`</mark> - минимальное кол-во тегов, <mark style="color:orange;">`data-ts-maxtags`</mark> - максимальное кол-во тегов.

Остальные параметры можно передать через опции объекта <mark style="color:orange;">`pipui.tagselector`</mark>

```javascript
var ts = new pipui.tagselector($('#example1'));

ts
.setMin(1) // Минимальное кол-во символов для добавления тега. По умолчанию 1
.setMax(32) // Максимальное кол-во символов для добавления тега. По умолчанию 32
.setKeys([',', 'Enter']) // Клавиши, по нажатию которых произойдет инициация добавления тега
.setPosition('end') // Как будут вставляться теги в списке - вначале или вконце(start или end соответственно). По умолчанию вконце - end
.setSeparator(',') // Разщделитель предустановленного значания value
.setMinTags(0) // Минимальное кол-во вставляемых тегов. По умолчанию 0 - без лимита
.setMaxTags(0) // Максимальное кол-во вставляемых тегов. По умолчанию 0 - без лимита
.setName('tags') // Имя результирующего поля
.append(value) // Добавить тег вконец списка
.prepend(value) // Добавить тег вначало списка
//.exists(key) // Проверяет наличие тега по ключу
.remove(key) // Удаляет тег по ключу
.clear() // Удаляет все теги из списка
//.length() // Возвращает кол-во тегов
.onclear(f()) // Действие, которое произойдет при удалении всех тегов(clear)
.onpush(f(value, name, position)) // Действие, которое произойдет при добавлении тега
.setTemplateSelector('...html...') // Изменение шаблона элемента по умолчанию. В качестве зарезервированных шаблонных ключей можно использовать: {KEY} - ключ элемента списка; {VALUE} - значение элемента списка; {NAME} - имя результирующего поля
.setTemplateBlock('...html...'); // Изменение шаблона блока списка по умолчанию. В качестве зарезервированных шаблонных ключей можно использовать {ID} - уникальный ID селектора
```

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

```javascript
$(function(){
        var ts = new p.tagselector($('.ts-1')).setDisableEvents(true);
        var ac = new p.autocomplete($('.ac-1'));

        ac.choice(function(data){ ts.append(data.value, data.key).getInput().val(''); });
});
```


---

# 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://v1-6-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.