feat(auto-complete): add virtual list support

packages/web-vue/components/auto-complete/README.en-US.md

@@ -14,6 +14,8 @@ description: The auto-complete function of the input.
 
 @import ./__demo__/footer.md
 
+@import ./__demo__/virtual-list.md
+
 ## API
 
 
@@ -30,6 +32,7 @@ description: The auto-complete function of the input.
 |filter-option|Custom option filtering method|`FilterOption`|`true`||
 |trigger-props|trigger props|`TriggerProps`|`-`|2.14.0|
 |allow-clear|Whether to allow the input to be cleared|`boolean`|`false`|2.23.0|
+|virtual-list-props|Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0|
 ### `<auto-complete>` Events
 
 |Event Name|Description|Parameters|version|
@@ -52,3 +55,14 @@ description: The auto-complete function of the input.
 |footer|The footer of the popup menu box|-||
 
 
+### VirtualListProps
+
+|Name|Description|Type|Default|version|
+|---|---|---|:---:|:---|
+|height|Viewable area height|`number \| string`|`-`||
+|threshold|The threshold of the number of elements to enable virtual scrolling. When the number of data is less than the threshold, virtual scrolling will not be enabled.|`number`|`-`||
+|isStaticItemHeight|(Repealed) Is the element height fixed. Version 2.18.0 deprecated, please use `fixedSize`|`boolean`|`false`||
+|fixedSize|Is the element height fixed.|`boolean`|`false`|2.34.1|
+|estimatedSize|Is the element height fixed.|`number`|`-`|2.34.1|
+|buffer|The number of elements mounted in advance outside the boundary of the viewport.|`number`|`10`|2.34.1|
+

packages/web-vue/components/auto-complete/README.zh-CN.md

@@ -12,6 +12,8 @@ description: 输入框的自动补全功能。
 
 @import ./__demo__/footer.md
 
+@import ./__demo__/virtual-list.md
+
 ## API
 
 
@@ -28,6 +30,7 @@ description: 输入框的自动补全功能。
 |filter-option|自定义选项过滤方法|`FilterOption`|`true`||
 |trigger-props|trigger 组件属性|`TriggerProps`|`-`|2.14.0|
 |allow-clear|是否允许清空输入框|`boolean`|`false`|2.23.0|
+|virtual-list-props|传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)|`VirtualListProps`|`-`|2.50.0|
 ### `<auto-complete>` Events
 
 |事件名|描述|参数|版本|
@@ -50,3 +53,13 @@ description: 输入框的自动补全功能。
 |footer|弹出框的页脚|-||
 
 
+### VirtualListProps
+
+|参数名|描述|类型|默认值|版本|
+|---|---|---|:---:|:---|
+|height|可视区域高度|`number \| string`|`-`||
+|threshold|开启虚拟滚动的元素数量阈值，当数据数量小于阈值时不会开启虚拟滚动。|`number`|`-`||
+|isStaticItemHeight|（已废除）元素高度是否是固定的。2.34.1 版本废除，请使用 `fixedSize`|`boolean`|`false`||
+|fixedSize|元素高度是否是固定的。|`boolean`|`false`|2.34.1|
+|estimatedSize|元素高度不固定时的预估高度。|`number`|`-`|2.34.1|
+|buffer|视口边界外提前挂载的元素数量。|`number`|`10`|2.34.1|

packages/web-vue/components/auto-complete/__demo__/virtual-list.md

@@ -0,0 +1,48 @@
+```yaml
+title:
+  zh-CN: 虚拟列表
+  en-US: Virtual List
+```
+
+## zh-CN
+
+虚拟列表的使用方法。
+
+---
+
+## en-US
+
+How to use the virtual list.
+
+---
+
+```vue
+<template>
+  <a-auto-complete
+    :data="data"
+    @search="handleSearch"
+    :style="{ width: '360px' }"
+    placeholder="please enter something"
+    :virtual-list-props="{ height: 200, threshold: 20 }"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: [],
+    };
+  },
+  methods: {
+    handleSearch(value) {
+      if (value) {
+        this.data = [...Array(5000)].map((_, index) => `${value}-${index}`);
+      } else {
+        this.data = [];
+      }
+    },
+  },
+};
+</script>
+```

packages/web-vue/components/auto-complete/auto-complete.tsx

@@ -23,6 +23,8 @@ import Option from '../select/option.vue';
 import { useSelect } from '../select/hooks/use-select';
 import { getKeyFromValue } from '../select/utils';
 import { useFormItem } from '../_hooks/use-form-item';
+import VirtualList from '../_components/virtual-list-v2';
+import { VirtualListProps } from '../_components/virtual-list-v2/interface';
 
 export default defineComponent({
   name: 'AutoComplete',
@@ -105,6 +107,15 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)
+     * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)
+     * @type VirtualListProps
+     * @version 2.50.0
+     */
+    virtualListProps: {
+      type: Object as PropType<VirtualListProps>,
+    },
   },
   emits: {
     'update:modelValue': (value: string) => true,
@@ -175,6 +186,10 @@ export default defineComponent({
       () => _popupVisible.value && validOptionInfos.value.length > 0
     );
 
+    // VirtualList
+    const virtualListRef = ref();
+    const component = computed(() => (props.virtualListProps ? 'div' : 'li'));
+
     const handlePopupVisibleChange = (popupVisible: boolean) => {
       _popupVisible.value = popupVisible;
     };
@@ -232,6 +247,7 @@ export default defineComponent({
         filterOption: mergedFilterOption,
         popupVisible: computedPopupVisible,
         valueKeys: computedValueKeys,
+        component,
         dropdownRef,
         optionRefs,
         onSelect: handleSelect,
@@ -273,13 +289,26 @@ export default defineComponent({
           ref={dropdownRef}
           class={`${prefixCls}-dropdown`}
           v-slots={{
-            footer: slots.footer,
+            'default': () => [
+              ...validOptions.value.map((info) =>
+                renderOption(info as SelectOptionInfo)
+              ),
+            ],
+            'virtual-list': () => (
+              <VirtualList
+                {...props.virtualListProps}
+                ref={virtualListRef}
+                data={validOptions.value}
+                v-slots={{
+                  item: ({ item }: { item: SelectOptionInfo }) =>
+                    renderOption(item),
+                }}
+              />
+            ),
+            'footer': slots.footer,
           }}
-        >
-          {validOptions.value.map((info) =>
-            renderOption(info as SelectOptionInfo)
-          )}
-        </SelectDropdown>
+          virtualList={Boolean(props.virtualListProps)}
+        />
       );
     };