标签输入组件可用于快速的为文本框添加标签输入功能,目前在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