跳到正文

AutoComplete 自动填充

AutoComplete 是一个边输入边给出补全建议的输入框。它自己不做过滤:由你根据当前文字传入选项,可以本地算,也可以请求服务端。它由 Input 驱动和 Select 共用的选项列表;焦点始终留在输入框里,符合 WAI-ARIA 带列表自动补全的组合框模式。

演示

基础用法

输入时(有选项时)弹出菜单,宽度和输入框一致。第一个建议自动成为当前项,按 Enter 直接选中;↑ / ↓ 移动。选中后把选项的 label 填进输入框。字符串选项是 { label, value } 的简写。

过滤和分组

选项由你自己过滤;分组的写法和 Select 一样。getShow 决定什么时候可以显示菜单:这里总是可以,所以聚焦空输入框就会列出全部。prefix 等 Input 的属性都可以直接传。

把选中当成动作

onSelect 拿到选中的值。clearAfterSelect 选中后清空输入框,适合「添加标签」这类输入;append 把标签追加到原文字后面而不是替换;blurAfterSelect 选中后让输入框失焦。

远程建议

文字变化时请求选项;请求期间用 loading 显示 Input 的加载图标。

键盘

菜单打开时:↑ / ↓ 移动当前建议(跳过禁用项,到头循环),Enter 选中,Esc 关闭。继续输入或按 ↓ 会重新打开。其他按键都用来编辑文字。输入法组字过程中按 Enter 只确认组字,不会选中建议。

Props

名称类型默认值说明版本
optionsAutoCompleteMixedOption[]必填当前文字对应的建议:字符串、{ label, value, disabled? } 或分组 { type: "group", label, key, children }。未发布
valuestring | nullundefined受控的值。未发布
defaultValuestring | nullnull非受控时的初始值。未发布
onUpdateValue(value: string | null) => voidundefined每次编辑、选中和清空时调用。未发布
onSelect(value, option) => voidundefined选中建议时调用。未发布
appendbooleanfalse选中后把标签追加到文字后面。未发布
clearAfterSelectbooleanfalse选中后清空输入框。未发布
blurAfterSelectbooleanfalse选中后让输入框失焦。未发布
getShow(value: string) => boolean文字不为空当前文字下是否可以显示菜单。未发布
showEmptybooleanfalse没有选项时也显示菜单(显示空状态文字)。未发布
emptyReactNode语言包「暂无数据」空状态文字。未发布
renderLabel(option, selected) => ReactNodeundefined自定义菜单里的选项标签。未发布
placementPopoverPlacementbottom-start菜单弹出的位置。未发布
to / zIndex同 Popover。未发布

除 type、autosize、rows、showPasswordOn 以外,Input 的属性 都可以用:size、status、clearable、loading、prefix、suffix、disabled、placeholder、ref(原生 input)、wrapperRef 和原生属性。