docs(auto-complete): add docs for creatable

pages/en-us/components/auto-complete.mdx

@@ -40,10 +40,25 @@ AutoComplete control of input field.
 }
 `} />
 
+<Playground
+  title="Only allow selected"
+  desc="You can only change the value of the input by select."
+  scope={{ AutoComplete }}
+  code={`
+() => {
+  const options = [
+    { label: 'London', value: 'london' },
+    { label: 'Sydney', value: 'sydney' },
+    { label: 'Shanghai', value: 'shanghai' },
+  ]
+  return <AutoComplete disableFreeSolo options={options} initialValue="sydney" />
+}
+`} />
+
 <Playground
   desc="Update the contents of drop-down list based on input."
   title="search"
-  scope={{ AutoComplete, useState }}
+  scope={{ AutoComplete }}
   code={`
 () => {
   const allOptions = [
@@ -51,7 +66,7 @@ AutoComplete control of input field.
     { label: 'Sydney', value: 'sydney' },
     { label: 'Shanghai', value: 'shanghai' },
   ]
-  const [options, setOptions] = useState()
+  const [options, setOptions] = React.useState()
   const searchHandler = (currentValue) => {
     if (!currentValue) return setOptions([])
     const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))
@@ -216,6 +231,31 @@ AutoComplete control of input field.
 }
 `} />
 
+<Playground
+  title="Creatable"
+  desc="Add an entry to be selected for any value."
+  scope={{ AutoComplete }}
+  code={`
+() => {
+  const allOptions = [
+    { label: 'London', value: 'london' },
+    { label: 'Sydney', value: 'sydney' },
+    { label: 'Shanghai', value: 'shanghai' },
+  ]
+  const [options, setOptions] = React.useState()
+  const searchHandler = (currentValue) => {
+    const createOptions = [{
+      value: currentValue, label: 'Add "' + currentValue + '"'
+    }]
+    if (!currentValue) return setOptions([])
+    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))
+    const optionsWithCreatable = relatedOptions.length !== 0 ? relatedOptions : createOptions
+    setOptions(optionsWithCreatable)
+  }
+  return <AutoComplete options={options} clearable disableFreeSolo placeholder="Enter here" onSearch={searchHandler} />
+}
+`} />
+
 <Attributes edit="/pages/en-us/components/auto-complete.mdx">
 <Attributes.Title>AutoComplete.Props</Attributes.Title>
 
@@ -235,6 +275,7 @@ AutoComplete control of input field.
 | **dropdownClassName** | className of dropdown box | `string` | - | - |
 | **dropdownStyle** | style of dropdown box | `object` | - | - |
 | **disableMatchWidth** | disable Option from follow parent width | `boolean` | - | `false` |
+| **disableFreeSolo** | only values can be changed through Select | `boolean` | - | `false` |
 | ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
 
 <Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>

pages/zh-cn/components/auto-complete.mdx

@@ -26,6 +26,21 @@ export const meta = {
 }
 `} />
 
+<Playground
+  title="只允许选择输入"
+  desc="只通过 Select 事件更改值。"
+  scope={{ AutoComplete }}
+  code={`
+() => {
+  const options = [
+    { label: 'London', value: 'london' },
+    { label: 'Sydney', value: 'sydney' },
+    { label: 'Shanghai', value: 'shanghai' },
+  ]
+  return <AutoComplete disableFreeSolo options={options} initialValue="sydney" />
+}
+`} />
+
 <Playground
   desc="禁用所有的交互。"
   title="禁用"
@@ -217,6 +232,32 @@ export const meta = {
 }
 `} />
 
+
+<Playground
+  title="可创建的"
+  desc="为任意值添加待选条目。"
+  scope={{ AutoComplete }}
+  code={`
+() => {
+  const allOptions = [
+    { label: 'London', value: 'london' },
+    { label: 'Sydney', value: 'sydney' },
+    { label: 'Shanghai', value: 'shanghai' },
+  ]
+  const [options, setOptions] = React.useState()
+  const searchHandler = (currentValue) => {
+    const createOptions = [{
+      value: currentValue, label: 'Add "' + currentValue + '"'
+    }]
+    if (!currentValue) return setOptions([])
+    const relatedOptions = allOptions.filter(item => item.value.includes(currentValue))
+    const optionsWithCreatable = relatedOptions.length !== 0 ? relatedOptions : createOptions
+    setOptions(optionsWithCreatable)
+  }
+  return <AutoComplete options={options} clearable disableFreeSolo placeholder="Enter here" onSearch={searchHandler} />
+}
+`} />
+
 <Attributes edit="/pages/zh-cn/components/auto-complete.mdx">
 <Attributes.Title>AutoComplete.Props</Attributes.Title>
 
@@ -236,6 +277,7 @@ export const meta = {
 | **dropdownClassName** | 自定义下拉框的类名 | `string` | - | - |
 | **dropdownStyle** | 自定义下拉框的样式 | `object` | - | - |
 | **disableMatchWidth** | 禁止 Option 跟随父元素的宽度 | `boolean` | - | `false` |
+| **disableFreeSolo** | 只允许通过 Select 事件更改值 (禁止 Input 输入随意值) | `boolean` | - | `false` |
 | ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |
 
 <Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>