标签输入

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

常用属性

属性类型说明默认值
maxTagsint最多可输入标签的数量无限制
maxCharsint单个标签最大字符串长度无限制
trimValuebool移除标签首尾的空格false
delimiterstring标签分隔符,
allowDuplicatesbool是否允许重复标签输入false
autocompleteobject动态下拉提示列表数据源,使用方法请参考下方的动态列表
onTagExistsfunction标签存在时的回调

以上为常用属性,更多属性请参考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-tagsinputhttps://github.com/bootstrap-tagsinput/bootstrap-tagsinput

文档最后更新时间:2023-07-31 08:12:09
著作权归应用插件开发者所有,未经许可,禁止转载、复制此文档的任何内容。