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

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

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

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

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

Пример работы кода выше

Некоторые из параметров, передаваемых обработчику, можно задать через атрибут data-ts-*. Так, например, data-ts-separator - задает разделить предустановленного значания value, data-ts-min - минимальную длину тега, data-ts-max - максимальную длину тега, data-ts-name - имя результирующего поля, data-ts-position - позиция куда будут добавляться теги (start - вначале, end - вконце), data-ts-mintags - минимальное кол-во тегов, data-ts-maxtags - максимальное кол-во тегов.

Остальные параметры можно передать через опции объекта pipui.tagselector

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 селектора

Вы так же можете использовать селектор тегов и автозаполнение

$(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(''); });
});