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"});
相关插件