html5自定义标签库,Bootstrap tagsinput自定义标签插件

tagsinput是一款基于Bootstrap的自定义标签插件。该自定义标签插件提供api接口，可以将input和select元素转换为标签。并能和typehead.js插件结合，提供查询提示信息。

tagsinput.js自定义标签插件支持bootstrap 3 和 bootstrap 4。

使用方法

在页面中引入jquery和bootstrap相关文件 ，以及tagsinput.css和tagsinput.js文件。

HTML结构

使用作为标签时，只需要添加data-role="tagsinput"属性即可。

使用元素作为标签时，需要添加multiple data-role="tagsinput"属性。

jQuery

Angular

React

Vue

初始化插件

你也可以动态的为input元添加标签。

$('input').tagsinput('add', { "value": 1 , "text": "jQuery"});

$('input').tagsinput('add', { "value": 2, "text": "Script"});

$('input').tagsinput('add', { "value": 3, "text": "Net"});

配置参数

该响应式圆形js轮播图插件的可用配置参数如下：

参数

描述

tagClass

标签的class名称，获者是一个返回classname的函数。

$('input').tagsinput({

tagClass: 'big'

});

$('input').tagsinput({

tagClass: function(item) {

return (item.length > 10 ? 'big' : 'small');

}

});

itemValue

当使用对象作为标签时，itemValue属性用于指明标签值的属性名称。

$('input').tagsinput({

itemValue: 'id'

});

$('input').tagsinput({

itemValue: