doc: update auto-complete demo

tangjinzhou · tangjinzhou · commit 3a2a67224010 · 2022-03-11T21:17:04.000+08:00
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -14,10 +14,10 @@ exports[`renders ./components/auto-complete/demo/basic.vue correctly 1`] = `
 
 exports[`renders ./components/auto-complete/demo/certain-category.vue correctly 1`] = `
 <div class="certain-category-search-wrapper" style="width: 250px;">
-  <div class="ant-select ant-select-lg certain-category-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
+  <div class="ant-select certain-category-search ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 250px;">
     <!---->
     <!---->
-    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-affix-wrapper ant-select-selection-search-input"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-suffix"><!----><!----><span role="img" aria-label="search" class="anticon anticon-search certain-category-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></span></span>
+    <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-lg ant-input-search-button ant-btn-icon-only" type="button"><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
       <!----><span class="ant-select-selection-placeholder"><!----></span>
     </div>
     <!---->
@@ -64,7 +64,7 @@ exports[`renders ./components/auto-complete/demo/options.vue correctly 1`] = `
 
 exports[`renders ./components/auto-complete/demo/uncertain-category.vue correctly 1`] = `
 <div class="global-search-wrapper" style="width: 300px;">
-  <div class="ant-select ant-select-lg global-search ant-select-lg ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search" style="width: 100%;">
+  <div style="width: 300px;" class="ant-select ant-select-show-search ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search">
     <!---->
     <!---->
     <div class="ant-select-selector"><span class="ant-select-selection-search"><span class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input"><span class="ant-input-wrapper ant-input-group"><!----><input placeholder="input here" id="rc_select_TEST_OR_SSR" autocomplete="off" type="search" class="ant-input ant-input-lg" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0"><span class="ant-input-group-addon"><button class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button" type="button"><!----><span role="img" aria-label="search" class="anticon anticon-search"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></button></span></span></span></span>
diff --git a/components/auto-complete/demo/certain-category.vue b/components/auto-complete/demo/certain-category.vue
@@ -21,11 +21,8 @@ Lookup-Patterns - Certain Category.
       v-model:value="value"
       class="certain-category-search"
       dropdown-class-name="certain-category-search-dropdown"
-      :dropdown-match-select-width="false"
-      :dropdown-style="{ width: '300px' }"
-      size="large"
-      style="width: 100%"
-      option-label-prop="value"
+      :dropdown-match-select-width="500"
+      style="width: 250px"
       :options="dataSource"
     >
       <template #option="item">
@@ -52,30 +49,33 @@ Lookup-Patterns - Certain Category.
           </a>
         </template>
         <template v-else>
-          {{ item.title }}
-          <span class="certain-search-item-count">{{ item.count }} people</span>
+          <div style="display: flex; justify-content: space-between">
+            {{ item.value }}
+            <span>
+              <UserOutlined />
+              {{ item.count }}
+            </span>
+          </div>
         </template>
       </template>
-      <a-input placeholder="input here">
-        <template #suffix><search-outlined class="certain-category-icon" /></template>
-      </a-input>
+      <a-input-search placeholder="input here" size="large"></a-input-search>
     </a-auto-complete>
   </div>
 </template>
 
 <script lang="ts">
-import { SearchOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
 const dataSource = [
   {
     value: 'Libraries',
     options: [
       {
-        value: 'AntDesign',
+        value: 'AntDesignVue',
         count: 10000,
       },
       {
-        value: 'AntDesign UI',
+        value: 'AntDesignVue UI',
         count: 10600,
       },
     ],
@@ -84,11 +84,11 @@ const dataSource = [
     value: 'Solutions',
     options: [
       {
-        value: 'AntDesign UI FAQ',
+        value: 'AntDesignVue UI FAQ',
         count: 60100,
       },
       {
-        value: 'AntDesign FAQ',
+        value: 'AntDesignVue FAQ',
         count: 30010,
       },
     ],
@@ -97,7 +97,7 @@ const dataSource = [
     value: 'Articles',
     options: [
       {
-        value: 'AntDesign design language',
+        value: 'AntDesignVue design language',
         count: 100000,
       },
     ],
@@ -108,7 +108,7 @@ const dataSource = [
 ];
 export default defineComponent({
   components: {
-    SearchOutlined,
+    UserOutlined,
   },
   setup() {
     return {
@@ -142,27 +142,3 @@ export default defineComponent({
   max-height: 300px;
 }
 </style>
-
-<style scoped>
-.certain-category-search-wrapper
-  :deep(.certain-category-search.ant-select-auto-complete)
-  .ant-input-affix-wrapper
-  .ant-input-suffix {
-  right: 12px;
-}
-.certain-category-search-wrapper :deep(.certain-search-item-count) {
-  position: absolute;
-  color: #999;
-  right: 16px;
-}
-.certain-category-search-wrapper
-  :deep(.certain-category-search.ant-select-focused)
-  .certain-category-icon {
-  color: #108ee9;
-}
-.certain-category-search-wrapper :deep(.certain-category-icon) {
-  color: #6e6e6e;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 16px;
-}
-</style>
diff --git a/components/auto-complete/demo/uncertain-category.vue b/components/auto-complete/demo/uncertain-category.vue
@@ -14,29 +14,30 @@ title:
 
 Lookup-Patterns - Uncertain Category.
 </docs>
-
 <template>
   <div class="global-search-wrapper" style="width: 300px">
     <a-auto-complete
       v-model:value="value"
-      class="global-search"
-      size="large"
-      style="width: 100%"
-      option-label-prop="title"
+      :dropdown-match-select-width="252"
+      style="width: 300px"
       :options="dataSource"
       @select="onSelect"
       @search="handleSearch"
     >
       <template #option="item">
-        Found {{ item.query }} on
-        <a
-          :href="`https://s.taobao.com/search?q=${item.query}`"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {{ item.category }}
-        </a>
-        <span class="global-search-item-count">{{ item.count }} results</span>
+        <div style="display: flex; justify-content: space-between">
+          <span>
+            Found {{ item.query }} on
+            <a
+              :href="`https://s.taobao.com/search?q=${item.query}`"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ item.category }}
+            </a>
+          </span>
+          <span>{{ item.count }} results</span>
+        </div>
       </template>
       <a-input-search size="large" placeholder="input here" enter-button></a-input-search>
     </a-auto-complete>
@@ -86,40 +87,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-.global-search-wrapper {
-  padding-right: 50px;
-}
-
-.global-search {
-  width: 100%;
-}
-
-.global-search.ant-select-auto-complete .ant-select-selection--single {
-  margin-right: -46px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
-  padding-right: 62px;
-}
-
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.global-search-item {
-  display: flex;
-}
-
-.global-search-item-desc {
-  flex: auto;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.global-search-item-count {
-  flex: none;
-}
-</style>
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
@@ -26,10 +26,10 @@ The differences with Select are:
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
 | autofocus | get focus when component mounted | boolean | false |  |
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
+| default (for customize input element) | customize input element | slot | `<Input />` |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | disabled | Whether disabled select | boolean | false |  |
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
@@ -27,10 +27,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |  |
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
 | autofocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
+| default (自定义输入框) | 自定义输入框 | slot | `<Input />` |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | disabled | 是否禁用 | boolean | false |  |
