AutoComplete自动完成 - 图1

AutoComplete 自动完成

输入框自动完成功能。

何时使用

  • 需要一个输入框而不是选择器。
  • 需要输入建议/辅助提示。

和 Select 的区别是：

  • AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助输入。
  • Select 是在限定的可选项中进行选择，关键词是选择。

代码演示

AutoComplete自动完成 - 图2

基本使用

基本使用。通过 options 设置自动完成的数据源。

  1. <template>
  2.   <a-auto-complete
  3.     v-model:value="value"
  4.     :options="options"
  5.     style="width: 200px"
  6.     placeholder="input here"
  7.     @select="onSelect"
  8.     @search="onSearch"
  9.   />
  10. </template>
  11. <script lang="ts">
  12. import { defineComponent, ref, watch } from 'vue';
  14. interface MockVal {
  15.   value: string;
  16. }
  17. const mockVal = (str: string, repeat = 1): MockVal => {
  18.   return {
  19.     value: str.repeat(repeat),
  20.   };
  21. };
  22. export default defineComponent({
  23.   setup() {
  24.     const value = ref('');
  25.     const options = ref<MockVal[]>([]);
  26.     const onSearch = (searchText: string) => {
  27.       console.log('searchText');
  28.       options.value = !searchText
  29.         ? []
  30.         : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];
  31.     };
  32.     const onSelect = (value: string) => {
  33.       console.log('onSelect', value);
  34.     };
  35.     watch(value, () => {
  36.       console.log('value', value.value);
  37.     });
  38.     return {
  39.       value,
  40.       options,
  41.       onSearch,
  42.       onSelect,
  43.     };
  44.   },
  45. });
  46. </script>

AutoComplete自动完成 - 图3

自定义输入组件

自定义输入组件。

  1. <template>
  2.   <a-auto-complete
  3.     v-model:value="value"
  4.     :options="options"
  5.     style="width: 200px"
  6.     @search="handleSearch"
  7.     @select="onSelect"
  8.   >
  9.     <a-textarea
  10.       placeholder="input here"
  11.       class="custom"
  12.       style="height: 50px"
  13.       @keypress="handleKeyPress"
  14.     />
  15.   </a-auto-complete>
  16. </template>
  17. <script lang="ts">
  18. import { defineComponent, ref } from 'vue';
  19. export default defineComponent({
  20.   setup() {
  21.     const value = ref('');
  22.     const options = ref<{ value: string }[]>([]);
  23.     const onSelect = (value: string) => {
  24.       console.log('onSelect', value);
  25.     };
  26.     const handleSearch = (value: string) => {
  27.       options.value = !value
  28.         ? []
  29.         : [{ value }, { value: value + value }, { value: value + value + value }];
  30.     };
  31.     const handleKeyPress = (ev: KeyboardEvent) => {
  32.       console.log('handleKeyPress', ev);
  33.     };
  34.     return {
  35.       value,
  36.       options,
  37.       onSelect,
  38.       handleSearch,
  39.       handleKeyPress,
  40.     };
  41.   },
  42. });
  43. </script>

AutoComplete自动完成 - 图4

查询模式 - 确定类目

查询模式 - 确定类目。

  1. <template>
  2.   <div class="certain-category-search-wrapper" style="width: 250px">
  3.     <a-auto-complete
  4.       v-model:value="value"
  5.       class="certain-category-search"
  6.       dropdown-class-name="certain-category-search-dropdown"
  7.       :dropdown-match-select-width="false"
  8.       :dropdown-style="{ width: '300px' }"
  9.       size="large"
  10.       style="width: 100%"
  11.       placeholder="input here"
  12.       option-label-prop="value"
  13.     >
  14.       <template #dataSource>
  15.         <a-select-opt-group v-for="group in dataSource" :key="group.title">
  16.           <template #label>
  17.             <span>
  18.               {{ group.title }}
  19.               <a
  20.                 style="float: right"
  21.                 href="https://www.google.com/search?q=antd"
  22.                 target="_blank"
  23.                 rel="noopener noreferrer"
  24.               >
  25.                 more
  26.               </a>
  27.             </span>
  28.           </template>
  29.           <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
  30.             {{ opt.title }}
  31.             <span class="certain-search-item-count">{{ opt.count }} people</span>
  32.           </a-select-option>
  33.         </a-select-opt-group>
  34.         <a-select-option key="all" disabled class="show-all">
  35.           <a
  36.             href="https://www.google.com/search?q=ant-design-vue"
  37.             target="_blank"
  38.             rel="noopener noreferrer"
  39.           >
  40.             View all results
  41.           </a>
  42.         </a-select-option>
  43.       </template>
  44.       <a-input>
  45.         <template #suffix><search-outlined class="certain-category-icon" /></template>
  46.       </a-input>
  47.     </a-auto-complete>
  48.   </div>
  49. </template>
  50. <script lang="ts">
  51. import { SearchOutlined } from '@ant-design/icons-vue';
  52. import { defineComponent, ref } from 'vue';
  53. const dataSource = [
  54.   {
  55.     title: 'Libraries',
  56.     children: [
  57.       {
  58.         title: 'AntDesign',
  59.         count: 10000,
  60.       },
  61.       {
  62.         title: 'AntDesign UI',
  63.         count: 10600,
  64.       },
  65.     ],
  66.   },
  67.   {
  68.     title: 'Solutions',
  69.     children: [
  70.       {
  71.         title: 'AntDesign UI FAQ',
  72.         count: 60100,
  73.       },
  74.       {
  75.         title: 'AntDesign FAQ',
  76.         count: 30010,
  77.       },
  78.     ],
  79.   },
  80.   {
  81.     title: 'Articles',
  82.     children: [
  83.       {
  84.         title: 'AntDesign design language',
  85.         count: 100000,
  86.       },
  87.     ],
  88.   },
  89. ];
  90. export default defineComponent({
  91.   setup() {
  92.     return {
  93.       value: ref(''),
  94.       dataSource,
  95.     };
  96.   },
  97.   components: {
  98.     SearchOutlined,
  99.   },
  100. });
  101. </script>
  102. <style>
  103. .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
  104.   color: #666;
  105.   font-weight: bold;
  106. }
  108. .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
  109.   border-bottom: 1px solid #f6f6f6;
  110. }
  112. .certain-category-search-dropdown .ant-select-dropdown-menu-item {
  113.   padding-left: 16px;
  114. }
  116. .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
  117.   text-align: center;
  118.   cursor: default;
  119. }
  121. .certain-category-search-dropdown .ant-select-dropdown-menu {
  122.   max-height: 300px;
  123. }
  124. </style>
  126. <style scoped>
  127. .certain-category-search-wrapper
  128.   :deep(.certain-category-search.ant-select-auto-complete)
  129.   .ant-input-affix-wrapper
  130.   .ant-input-suffix {
  131.   right: 12px;
  132. }
  133. .certain-category-search-wrapper :deep(.certain-search-item-count) {
  134.   position: absolute;
  135.   color: #999;
  136.   right: 16px;
  137. }
  138. .certain-category-search-wrapper
  139.   :deep(.certain-category-search.ant-select-focused)
  140.   .certain-category-icon {
  141.   color: #108ee9;
  142. }
  143. .certain-category-search-wrapper :deep(.certain-category-icon) {
  144.   color: #6e6e6e;
  145.   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  146.   font-size: 16px;
  147. }
  148. </style>

AutoComplete自动完成 - 图5

自定义选项

也可以直接传递 #dataSource 的Option。

  1. <template>
  2.   <a-auto-complete
  3.     v-model:value="value"
  4.     style="width: 200px"
  5.     placeholder="input here"
  6.     @search="handleSearch"
  7.   >
  8.     <template #dataSource>
  9.       <a-select-option v-for="email in result" :key="email">
  10.         {{ email }}
  11.       </a-select-option>
  12.     </template>
  13.   </a-auto-complete>
  14. </template>
  15. <script lang="ts">
  16. import { defineComponent, ref } from 'vue';
  18. export default defineComponent({
  19.   setup() {
  20.     const value = ref('');
  21.     const result = ref<string[]>([]);
  22.     const handleSearch = (val: string) => {
  23.       let res: string[];
  24.       if (!val || val.indexOf('@') >= 0) {
  25.         res = [];
  26.       } else {
  27.         res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${val}@${domain}`);
  28.       }
  29.       result.value = res;
  30.     };
  32.     return {
  33.       value,
  34.       result,
  35.       handleSearch,
  36.     };
  37.   },
  38. });
  39. </script>

AutoComplete自动完成 - 图6

不区分大小写

不区分大小写的 AutoComplete。

  1. <template>
  2.   <a-auto-complete
  3.     v-model:value="value"
  4.     :options="options"
  5.     style="width: 200px"
  6.     placeholder="input here"
  7.     :filter-option="filterOption"
  8.   />
  9. </template>
  10. <script lang="ts">
  11. import { defineComponent, ref } from 'vue';
  12. interface Option {
  13.   value: string;
  14. }
  15. export default defineComponent({
  16.   setup() {
  17.     const filterOption = (input: string, option: Option) => {
  18.       return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
  19.     };
  20.     return {
  21.       value: ref(''),
  22.       options: ref<Option[]>([
  23.         { value: 'Burns Bay Road' },
  24.         { value: 'Downing Street' },
  25.         { value: 'Wall Street' },
  26.       ]),
  27.       filterOption,
  28.     };
  29.   },
  30. });
  31. </script>

AutoComplete自动完成 - 图7

查询模式 - 不确定类目

查询模式 - 不确定类目。

  1. <template>
  2.   <div class="global-search-wrapper" style="width: 300px">
  3.     <a-auto-complete
  4.       v-model:value="value"
  5.       class="global-search"
  6.       size="large"
  7.       style="width: 100%"
  8.       option-label-prop="title"
  9.       @select="onSelect"
  10.       @search="handleSearch"
  11.     >
  12.       <template #dataSource>
  13.         <a-select-option v-for="item in dataSource" :key="item.category" :title="item.category">
  14.           Found {{ item.query }} on
  15.           <a
  16.             :href="`https://s.taobao.com/search?q=${item.query}`"
  17.             target="_blank"
  18.             rel="noopener noreferrer"
  19.           >
  20.             {{ item.category }}
  21.           </a>
  22.           <span class="global-search-item-count">{{ item.count }} results</span>
  23.         </a-select-option>
  24.       </template>
  25.       <a-input-search size="large" placeholder="input here" enterButton></a-input-search>
  26.     </a-auto-complete>
  27.   </div>
  28. </template>
  29. <script lang="ts">
  30. import { defineComponent, ref } from 'vue';
  31. interface Option {
  32.   query: string;
  33.   category: string;
  34.   count: number;
  35. }
  36. export default defineComponent({
  37.   setup() {
  38.     const value = ref('');
  39.     const dataSource = ref<Option[]>([]);
  40.     const onSelect = (value: string) => {
  41.       console.log('onSelect', value);
  42.     };
  44.     const getRandomInt = (max: number, min = 0) => {
  45.       return Math.floor(Math.random() * (max - min + 1)) + min;
  46.     };
  48.     const searchResult = (query: string): Option[] => {
  49.       return new Array(getRandomInt(5))
  50.         .join('.')
  51.         .split('.')
  52.         .map((item, idx) => ({
  53.           query,
  54.           category: `${query}${idx}`,
  55.           count: getRandomInt(200, 100),
  56.         }));
  57.     };
  58.     const handleSearch = (val: string) => {
  59.       dataSource.value = val ? searchResult(val) : [];
  60.     };
  61.     return {
  62.       value,
  63.       dataSource,
  64.       onSelect,
  65.       handleSearch,
  66.     };
  67.   },
  68. });
  69. </script>
  70. <style>
  71. .global-search-wrapper {
  72.   padding-right: 50px;
  73. }
  75. .global-search {
  76.   width: 100%;
  77. }
  79. .global-search.ant-select-auto-complete .ant-select-selection--single {
  80.   margin-right: -46px;
  81. }
  83. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
  84.   padding-right: 62px;
  85. }
  87. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
  88.   border-top-left-radius: 0;
  89.   border-bottom-left-radius: 0;
  90. }
  92. .global-search-item {
  93.   display: flex;
  94. }
  96. .global-search-item-desc {
  97.   flex: auto;
  98.   text-overflow: ellipsis;
  99.   overflow: hidden;
  100. }
  102. .global-search-item-count {
  103.   flex: none;
  104. }
  105. </style>

API

  1. <a-auto-complete v-model:value="value" :options="options" />
参数说明类型默认值版本
allowClear支持清除, 单选模式有效booleanfalse
autofocus自动获取焦点booleanfalse
backfill使用键盘选择选项的时候把选中项回填到输入框中booleanfalse
#default (自定义输入框)自定义输入框HTMLInputElement / HTMLTextAreaElement<Input />
options自动完成的数据源slot | DataSourceItemType[]
dropdownMenuStyledropdown 菜单自定义样式object1.5.0
defaultActiveFirstOption是否默认高亮第一个选项。booleantrue
disabled是否禁用booleanfalse
filterOption是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false。boolean or function(inputValue, option)true
optionLabelProp回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 value。stringchildren
placeholder输入框提示string | slot-
v-model:value指定当前选中的条目string|string[]|{ key: string, label: string|vNodes }|Array<{ key: string, label: string|vNodes }>无
defaultOpen是否默认展开下拉菜单boolean-
open是否展开下拉菜单boolean-

事件

事件名称说明回调参数版本
change选中 option，或 input 的 value 变化时，调用此函数function(value)
blur失去焦点时的回调function()
focus获得焦点时的回调function()
search搜索补全项的时候调用function(value)
select被选中时调用，参数为选中项的 value 值function(value, option)
dropdownVisibleChange展开下拉菜单的回调function(open)

方法

名称描述版本
blur()移除焦点
focus()获取焦点