标签输入组件可用于快速的为文本框添加标签输入功能,目前在FastAdmin1.3.0+
版本支持该功能。
该组件基于Bootstrap-tagsinput
进行二次开发,除了动态获取typeahead
配置不同外,其余属性均相同,因此可直接查询Bootstrap-tagsinput
的文档:http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
<!--常规渲染-->
<input type="text" class="form-control" data-role='tagsinput' />
<!--设定默认值-->
<input type="text" class="form-control" data-role='tagsinput' value="你好,世界" />
<!--自定义属性-->
<input type="text" class="form-control" data-role='tagsinput' value="你好,世界" data-tagsinput-options='{"maxTags":4, "trimValue":true}' />
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
maxTags | int | 最多可输入标签的数量 | 无限制 |
maxChars | int | 单个标签最大字符串长度 | 无限制 |
trimValue | bool | 移除标签首尾的空格 | false |
delimiter | string | 标签分隔符 | , |
allowDuplicates | bool | 是否允许重复标签输入 | false |
autocomplete | object | 动态下拉提示列表数据源,使用方法请参考下方的动态列表 | 无 |
onTagExists | function | 标签存在时的回调 | 无 |
以上为常用属性,更多属性请参考Bootstrap-tagsinput
文档
如果需要传递function
类型属性,例如处理onTagExists
属性,此时我们只能通过在JS中给元素添加参数,不支持使用data-tagsinput-options
的方式,如
$("#test1").data("tagsinput-options", {
"maxTags":4,
"trimValue":true,
"onTagExists":function(){
//处理回调事件
}
});
请直接参考Bootstrap-tagsinput
的文档:http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
原生的Bootstrap-tagsinput
是需要配合typeahead
来实现,但是在FastAdmin中是需要配合自动完成(Autocomplete)
组件来实现。
我们只需要传递autocomplete
属性即可,其中url
为数据源地址。
<input type="text" class="form-control" data-role='tagsinput' data-tagsinput-options='{"autocomplete":{"url":"/index/ajax/autocomplete"}}' />
数据源的格式我们可以参考左侧自动完成(Autocomplete)
组件章节的文档。
Bootstrap-tagsinput
:https://github.com/bootstrap-tagsinput/bootstrap-tagsinput