Bootstrap tagsinput自定义标签插件

简要教程

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

使用方法

tagsinput.js自定义标签插件支持bootstrap3和bootstrap4。

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

<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"属性即可。

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

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

<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元添加标签。

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