Bootstrap tagsinput自定义标签插件

Bootstrap tagsinput自定义标签插件

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

使用方法
tagsinput.js自定义标签插件支持bootstrap3和bootstrap4。
在页面中引入jquery和bootstrap相关文件 ,以及tagsinput.css和tagsinput.js文件

1
2
3
4
5
6
<link href="bootstrap.css" rel="stylesheet">
<link href="tagsinput.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="typehead.min.js"></script>
<script src="tagsinput.js"></script>

HTML结构
使用input作为标签时,只需要添加data-role="tagsinput"属性即可。

1
<input type="text" data-role="tagsinput" value="jQuery,Script,Net">

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

1
2
3
4
5
6
<select multiple data-role="tagsinput">
  <option value="jQuery">jQuery</option>
  <option value="Angular">Angular</option>
  <option value="React">React</option>
  <option value="Vue">Vue</option>
</select>

初始化插件
你也可以动态的为input元添加标签。

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

文件信息:

    0

    发表评论