diff --git a/pages/en-us/components/auto-complete.mdx b/pages/en-us/components/auto-complete.mdx
index 38f6c63..f41b11a 100644
--- a/pages/en-us/components/auto-complete.mdx
+++ b/pages/en-us/components/auto-complete.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { AutoComplete, Spacer, Badge, Row } from 'components'
+import { AutoComplete, Spacer, Badge, Grid, Text } from 'components'
 import { useState, useRef, useEffect } from 'react'
 
 export const meta = {
@@ -155,19 +155,18 @@ AutoComplete control of input field.
 <Playground
   title="custom option"
   desc="You can rewrite each item of the `AutoComplete` to express more."
-  scope={{ AutoComplete, useState, Spacer, Badge, Row }}
+  scope={{ AutoComplete, useState, Text, Badge, Grid }}
   code={`
 () => {
   const makeOption = (label, value) => (
     <AutoComplete.Option value={value}>
-      <div style={{ width: '100%' }}>
-        <div style={{ display: 'flex-inline', width: '100%', alignItems: 'space-between' }}>
-          <h4>Recent search results </h4>
-          <Badge type="success" style={{ float: 'right' }}>Recommended</Badge>
-        </div>
-        <Spacer y={.5} />
-        <span>{label}</span>
-      </div>
+      <Grid.Container style={{ padding: '10pt 0' }}>
+        <Grid xs={24}><Text span b size="1.2rem">Recent search results </Text></Grid>
+        <Grid.Container xs={24}>
+          <Grid xs><Text span>{label}</Text></Grid>
+          <Grid xs={4}><Badge type="success">Recommended</Badge></Grid>
+        </Grid.Container>
+      </Grid.Container>
     </AutoComplete.Option>
   )
   const allOptions = [
diff --git a/pages/zh-cn/components/auto-complete.mdx b/pages/zh-cn/components/auto-complete.mdx
index f3fc33e..96fb024 100644
--- a/pages/zh-cn/components/auto-complete.mdx
+++ b/pages/zh-cn/components/auto-complete.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { AutoComplete, Spacer, Badge, Row } from 'components'
+import { AutoComplete, Spacer, Badge, Text, Grid } from 'components'
 import { useState, useRef, useEffect } from 'react'
 
 export const meta = {
@@ -156,19 +156,18 @@ export const meta = {
 <Playground
   title="定制选项"
   desc="你可以详细定制每一个备选项，让 `自动完成` 组件表达更多的信息。"
-  scope={{ AutoComplete, useState, Spacer, Badge, Row }}
+  scope={{ AutoComplete, useState, Text, Badge, Grid }}
   code={`
 () => {
   const makeOption = (label, value) => (
     <AutoComplete.Option value={value}>
-      <div style={{ width: '100%' }}>
-        <div style={{ display: 'flex-inline', width: '100%', alignItems: 'space-between' }}>
-          <h4>最近的搜索结果</h4>
-          <Badge type="success" style={{ float: 'right' }}>推荐的</Badge>
-        </div>
-        <Spacer y={.5} />
-        <span>{label}</span>
-      </div>
+      <Grid.Container style={{ padding: '10pt 0' }}>
+        <Grid xs={24}><Text span b size="1.2rem">最近的搜索结果</Text></Grid>
+        <Grid.Container xs={24}>
+          <Grid xs><Text span>{label}</Text></Grid>
+          <Grid xs={4}><Badge type="success">推荐的</Badge></Grid>
+        </Grid.Container>
+      </Grid.Container>
     </AutoComplete.Option>
   )
   const allOptions = [