AutoComplete 自动填充
AutoComplete 是一个边输入边给出补全建议的输入框。它自己不做过滤:由你根据当前文字传入选项,可以本地算,也可以请求服务端。它由 Input 驱动和 Select 共用的选项列表;焦点始终留在输入框里,符合 WAI-ARIA 带列表自动补全的组合框模式。
演示
基础用法
输入时(有选项时)弹出菜单,宽度和输入框一致。第一个建议自动成为当前项,按 Enter 直接选中;↑ / ↓ 移动。选中后把选项的 label 填进输入框。字符串选项是 { label, value } 的简写。
过滤和分组
选项由你自己过滤;分组的写法和 Select 一样。getShow 决定什么时候可以显示菜单:这里总是可以,所以聚焦空输入框就会列出全部。prefix 等 Input 的属性都可以直接传。
把选中当成动作
onSelect 拿到选中的值。clearAfterSelect 选中后清空输入框,适合「添加标签」这类输入;append 把标签追加到原文字后面而不是替换;blurAfterSelect 选中后让输入框失焦。
远程建议
文字变化时请求选项;请求期间用 loading 显示 Input 的加载图标。
键盘
菜单打开时:↑ / ↓ 移动当前建议(跳过禁用项,到头循环),Enter 选中,Esc 关闭。继续输入或按 ↓ 会重新打开。其他按键都用来编辑文字。输入法组字过程中按 Enter 只确认组字,不会选中建议。
Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
options | AutoCompleteMixedOption[] | 必填 | 当前文字对应的建议:字符串、{ label, value, disabled? } 或分组 { type: "group", label, key, children }。 | 未发布 |
value | string | null | undefined | 受控的值。 | 未发布 |
defaultValue | string | null | null | 非受控时的初始值。 | 未发布 |
onUpdateValue | (value: string | null) => void | undefined | 每次编辑、选中和清空时调用。 | 未发布 |
onSelect | (value, option) => void | undefined | 选中建议时调用。 | 未发布 |
append | boolean | false | 选中后把标签追加到文字后面。 | 未发布 |
clearAfterSelect | boolean | false | 选中后清空输入框。 | 未发布 |
blurAfterSelect | boolean | false | 选中后让输入框失焦。 | 未发布 |
getShow | (value: string) => boolean | 文字不为空 | 当前文字下是否可以显示菜单。 | 未发布 |
showEmpty | boolean | false | 没有选项时也显示菜单(显示空状态文字)。 | 未发布 |
empty | ReactNode | 语言包「暂无数据」 | 空状态文字。 | 未发布 |
renderLabel | (option, selected) => ReactNode | undefined | 自定义菜单里的选项标签。 | 未发布 |
placement | PopoverPlacement | bottom-start | 菜单弹出的位置。 | 未发布 |
to / zIndex | 同 Popover。 | 未发布 |
除 type、autosize、rows、showPasswordOn 以外,Input 的属性 都可以用:size、status、clearable、loading、prefix、suffix、disabled、placeholder、ref(原生 input)、wrapperRef 和原生属性。