@include 'common'

## 何时使用

Select 用于替代原生 select，在限定的可选性内进行选择，核心能力是 选择
AutoComplete 本质上是带输入提示的 Input 组件，核心能力是 辅助输入

## 如何使用

Select 优先使用 value 作为渲染的菜单项的 key 值，所以 value 不能重复, 否则无法渲染下拉菜单。如果没有设置 key 则会使用默认的序列 index 作为 key 值，确保这些值不会发生重复。
value 使用字符串类型，不允许出现 null/undefined/object/array 类型数值
Select 同时支持 children 和 dataSource 作为数据源, 如果同时设置, 则以 children 为准.
自定义弹出层一定要透传 props，参考下方示例的 弹层定制（因为 Overlay 的弹层的动画是依靠 className 实现的，如果不透传 props 则会造成无法监听到动画播放结束的事件。）

## 代码演示

# 基本使用

最基本的使用、带清除、搜索功能的展示
@include 'demo1'

# 多选

多选模式, 通过 showSearch 可以开启搜索, 但搜索值不可用作选项
@include 'demo2'

# 标签

标签模式，输入的内容可以作为选项
@include 'demo3'

# 最大数量

多选模式下通过 maxTagCount 控制选择的个数，通过 maxTagPlaceholder 控制选择的 hover 样式。
@include 'demo4'

# 级联选择

使用 Select 构建级联选择框
@include 'demo5'

# 分组

使用 OptionGroup 针对选项进行分组
@include 'demo6'

# 自定义 value 展示

自定义 value 展示
@include 'demo7'

# 远程搜索

使用 showSearch 显示搜索框，如果需要动态更新 dataSource，需要关闭 filterLocal
@include 'demo8'

# 前后缀

Select 增加前后缀
@include 'demo9'

# 自定义菜单

通过 itemRender 和 valueRender (仅 Select) 自定义渲染的节点内容。
@include 'demo10'

# 定制菜单布局

通过 MenuProps 自定义 Select 弹窗的头部和底部（注意 MenuProps.header 不能与 hasSelectAll 同时出现, MenuProps.header 优先级更高）
@include 'demo11'

# 对象数据

useDetailValue 把 value onChange 第一个参数 从字符串变成对象
@include 'demo12'

# 输入框辅助完成

AutoComplete 继承了 Input 的能力，并在其基础上增加了 autoComplete 的功能。 对于设置为 AutoComplete 为 off 不生效对的情况，可以参考 MDN 中进行设置。
@include 'demo13'

# 弹层定制

通过 popupContent 定制 Select 弹层， Select 使用 popupContent 中渲染出的 item 的 value 作为菜单项的 key，如果没有提供或者自定义渲染 key 请使用 valueRender
@include 'demo14'

# 辅助输入获取远程数据

使用动态数据填充 AutoComplete, 设置 filterLocal 为 false
@include 'demo15'

# 滚动到底部加载

通过监控 menu 的 onScroll 滚动到底部的时候自动加载 dataSource
@include 'demo16'

# 无限滚动

select 配合无限滚动
@include 'demo17'

# 无障碍支持

当聚焦在组件上时，通过 aria-labelledby 对组件进行描述。关于键盘操作请参考#无障碍键盘操作指南。
@include 'demo18'