# autoComplete
# Schema类静态属性
Schema类静态属性请访问 Schema.js类静态属性 及 值逻辑与事件逻辑关系
{
widget: 'autoComplete',
title: '自动完成',
preview: '',
type: 'string',
validators: [],
logic: {
value: ['=', '!='],
event: []
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# schema.default
默认''
# schema.option定义
schema完整定义请访问schema
{
type: "static", // 可选项数据来源方式，可选：static、dynamic
data: ["A", "B"],
url: "", // 当type为 dynamic 时，接口地址
adapter: "", // 当type为 dynamic 时，适配脚本，使用见下方
dynamicData: [] // 当type为 dynamic 时，可选项数据源，经过 adapter 转换之后
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# adapter使用说明
- 示例
需求：通过 http://mock.com/list 接口返回作为可选项
{
type: "dynamic",
data: [],
url: "http://mock.com/list",
adapter: "",
dynamicData: []
}
1
2
3
4
5
6
7
2
3
4
5
6
7
假设 http://mock.com/list 返回值为
[
{ id: 2, name: 'tom'},
{ id: 3, name: 'lilei'},
...
]
1
2
3
4
5
2
3
4
5
dynamicData 必须为字符串列表，所以adapter可以这么写:
return data.map(function(item){
return item.name
})
1
2
3
2
3
TIP
关于adapter如何写？以及adapter可用的内置方法可参考 Worker
转换之后 dynamicData 的数据为：
[
'tom',
'lilei',
// ...
]
1
2
3
4
5
2
3
4
5
于是得到schema.option如下:
{
type: "dynamic",
data: [],
url: "http://mock.com/list",
adapter: "return data.map(function(item){return item.name})",
dynamicData: []
}
1
2
3
4
5
6
7
2
3
4
5
6
7
adapter注意
# 示例展示
# 静态数据示例
- schema
{
"key": "ksnRtsAIO",
"widget": "autoComplete",
"hidden": false,
"option": {
"type": "static",
"url": "",
"adapter": "",
"data": [
"apple",
"banana",
"orange",
"lemon"
],
"dynamicData": [],
"clearable": true
},
"name": "fruit",
"type": "string",
"label": "自动完成",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "change"
}
],
"placeholder": "请输入..."
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 动态数据示例
- schema
{
"key": "ksnRts1IO",
"widget": "autoComplete",
"hidden": false,
"option": {
"type": "dynamic",
"url": "https://ev9ng.csb.app/autoComplete-dynamic.json",
"adapter": "return data.map(function(item){ return item.name })",
"data": [],
"dynamicData": [],
"clearable": true
},
"name": "fruit",
"type": "string",
"label": "自动完成",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "change"
}
],
"placeholder": "请输入..."
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28