diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md index 90c48ec49..2a2c1b230 100755 --- a/docs/zh-CN/components/form/select.md +++ b/docs/zh-CN/components/form/select.md @@ -1187,6 +1187,38 @@ leftOptions 动态加载,默认 source 接口是返回 options 部分,而 le } ``` +## 自动补全 autoComplete + +可以在`autoComplete`配置中,用数据映射,获取变量`term`,为当前输入的关键字。 + +```schema: scope="body" +{ + "type": "form", + "body": [ + { + "name": "select1", + "type": "select", + "label": "选项自动补全(单选)", + "autoComplete": "/api/mock2/options/autoComplete?term=${term}", + "placeholder": "请输入", + "clearable": true + }, + { + "name": "select2", + "type": "select", + "label": "选项自动补全(多选)", + "autoComplete": "/api/mock2/options/autoComplete?labelField=name&valueField=id&term=${term}", + "placeholder": "请输入", + "labelField": "name", + "valueField": "id", + "clearable": true, + "multiple": true, + "maxTagCount": 2 + } + ] +} +``` + ## 属性表 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 diff --git a/mock/cfc/mock/options/autoComplete.js b/mock/cfc/mock/options/autoComplete.js index 32ce89527..017f49973 100755 --- a/mock/cfc/mock/options/autoComplete.js +++ b/mock/cfc/mock/options/autoComplete.js @@ -31,15 +31,18 @@ const db = [ ]; module.exports = function (req, res) { + const labelField = req.query.labelField || 'label'; + const valueField = req.query.valueField || 'value'; const term = req.query.term || ''; + const list = db.map(item => ({[labelField]: item.label, [valueField]: item.value})) res.json({ status: 0, msg: '', data: term - ? db.filter(function (item) { + ? list.filter(function (item) { return term ? ~item.label.indexOf(term) : false; }) - : db + : list }); }; diff --git a/packages/amis-ui/src/components/Select.tsx b/packages/amis-ui/src/components/Select.tsx index 6e0c538d8..cd47719ef 100644 --- a/packages/amis-ui/src/components/Select.tsx +++ b/packages/amis-ui/src/components/Select.tsx @@ -657,11 +657,19 @@ export class Select extends React.Component { } } + /** + * DownShift中ESC按键动作会触发change事件,此时selectItem为null,需要单独处理,参考: + * {@link https://github.com/downshift-js/downshift/issues/719 GitHub Issue #719} + */ @autobind handleChange(selectItem: any) { const {onChange, multiple, simpleValue, valueField} = this.props; let {selection} = this.state; + if (selectItem == null) { + return; + } + if (multiple) { const selectionValues = selection.map(item => item[valueField]); selection = selection.concat(); @@ -785,6 +793,7 @@ export class Select extends React.Component { translate: __ } = this.props; const selection = this.state.selection; + const labelKey = labelField || 'label'; if (!selection.length) { return ( @@ -815,7 +824,7 @@ export class Select extends React.Component { }; return [ ...selection.slice(0, maxVisibleCount), - {label: `+ ${selection.length - maxVisibleCount} ...`} + {[labelKey]: `+ ${selection.length - maxVisibleCount} ...`} ].map((item, index) => { if (index === maxVisibleCount) { return ( @@ -843,7 +852,7 @@ export class Select extends React.Component { {renderValueLabel ? renderValueLabel(item) - : item[labelField || 'label']} + : item[labelKey]} { } /** 避免点击查看浮窗时呼出下拉菜单 */ > - {renderValueLabel - ? renderValueLabel(item) - : item[labelField || 'label']} + {renderValueLabel ? renderValueLabel(item) : item[labelKey]} @@ -883,7 +890,7 @@ export class Select extends React.Component { @@ -894,9 +901,7 @@ export class Select extends React.Component { })} > - {renderValueLabel - ? renderValueLabel(item) - : item[labelField || 'label']} + {renderValueLabel ? renderValueLabel(item) : item[labelKey]} { })} key={index} > - {renderValueLabel - ? renderValueLabel(item) - : item[labelField || 'label']} + {renderValueLabel ? renderValueLabel(item) : item[labelKey]} ); } return valuesNoWrap ? ( - `${item[labelField || 'label']}${ - index === selection.length - 1 ? '' : ' + ' - }` + `${item[labelKey]}${index === selection.length - 1 ? '' : ' + '}` ) : ( @@ -948,9 +949,7 @@ export class Select extends React.Component { })} > - {renderValueLabel - ? renderValueLabel(item) - : item[labelField || 'label']} + {renderValueLabel ? renderValueLabel(item) : item[labelKey]} { const { popOverContainer, options, - value, valueField, labelField, noResultsText,