> For the complete documentation index, see [llms.txt](https://v1-6-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://v1-6-0.pipui.ru/components/tag-selector.md).

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

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

В качестве разделителей используются запятая или клавиша 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(''); });
});
```