From 8315262804dd446cfb0b548003c29724bc6894b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 21 Sep 2020 16:24:48 +0800
Subject: [PATCH] docs: Add AutoComplete migrate demo (#26838)

---
 components/auto-complete/index.en-US.md | 22 ++++++++++++++++++++++
 components/auto-complete/index.zh-CN.md | 22 ++++++++++++++++++++++
 docs/react/migration-v4.en-US.md        |  1 +
 docs/react/migration-v4.zh-CN.md        |  1 +
 4 files changed, 46 insertions(+)

diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index b72631aaaa..8c99200bae 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -58,3 +58,25 @@ Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [
 ### Part of api from v3 not available in v4?
 
 AutoComplete is a Input component support auto complete tips which should not support `labelInValue` prop to modify dispaly value in input. In v3, AutoComplete realization can not handle case that user type match of both `value` & `label` are the same. v4 not longer support `label` as the value input.
+
+Besides, to unique API, `dataSource` replaced with `options`:
+
+#### v3
+
+```tsx
+dataSource = ['light', 'bamboo'];
+// or
+dataSource = [
+  { value: 'light', text: 'Light' },
+  { value: 'bamboo', text: 'Bamboo' },
+];
+```
+
+#### v4
+
+```tsx
+options = [
+  { value: 'light', label: 'Light' },
+  { value: 'bamboo', label: 'Bamboo' },
+];
+```
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index a5b9b9e8ef..c7e7a78a21 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -60,3 +60,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 ### v3 的部分属性为何在 v4 中没有了？
 
 AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有 `labelInValue` 等影响 value 展示的属性。在 v3 版本，AutoComplete 实现存在输入值如果遇到 `value` 与 `label` 相同时无法映射的问题。 v4 中不再支持 `label` 为值的输入形态。
+
+此外为了统一 API，`dataSource` 改为 `options` 你可以如下转换：
+
+#### v3
+
+```tsx
+dataSource = ['light', 'bamboo'];
+// or
+dataSource = [
+  { value: 'light', text: 'Light' },
+  { value: 'bamboo', text: 'Bamboo' },
+];
+```
+
+#### v4
+
+```tsx
+options = [
+  { value: 'light', label: 'Light' },
+  { value: 'bamboo', label: 'Bamboo' },
+];
+```
diff --git a/docs/react/migration-v4.en-US.md b/docs/react/migration-v4.en-US.md
index 63dcaa0d48..4d9720821e 100644
--- a/docs/react/migration-v4.en-US.md
+++ b/docs/react/migration-v4.en-US.md
@@ -125,6 +125,7 @@ const Demo = () => (
   - use virtual scrolling.
   - `onBlur` no longer trigger value change and return React origin `event` object instead.
   - AutoComplete no longer support `optionLabelProp`. Please set Option `value` directly.
+  - AutoComplete options definition align with Select. Please use `options` instead of `dataSource`.
   - Select remove `dropdownMenuStyle` prop.
   - Use `listHeight` to config popup height instead of `dropdownStyle`.
   - `filterOption` return origin data with second params instead. No need to use `option.props.children` for matching.
diff --git a/docs/react/migration-v4.zh-CN.md b/docs/react/migration-v4.zh-CN.md
index c15365c17f..985fe251b7 100644
--- a/docs/react/migration-v4.zh-CN.md
+++ b/docs/react/migration-v4.zh-CN.md
@@ -125,6 +125,7 @@ const Demo = () => (
   - 使用虚拟滚动。
   - `onBlur` 时不再修改选中值，且返回 React 原生的 `event` 对象。
   - AutoComplete 不再支持 `optionLabelProp`，请直接设置 Option `value` 属性。
+  - AutoComplete 选项与 Select 对齐，请使用 `options` 代替 `dataSource`。
   - Select 移除 `dropdownMenuStyle` 属性。
   - 如果你需要设置弹窗高度请使用 `listHeight` 来代替 `dropdownStyle` 的高度样式。
   - `filterOption` 第二个参数直接返回原数据，不在需要通过 `option.props.children` 来进行匹配。