• AutoComplete 自动完成
    • 何时使用
    • 代码演示
      • 基本使用
      • 查询模式 - 确定类目
      • 自定义输入组件
      • 不区分大小写
      • 自定义选项
      • 查询模式 - 不确定类目
  • API
    • 事件
  • 方法

    AutoComplete 自动完成

    输入框自动完成功能。

    何时使用

    需要自动完成时。

    代码演示

    AutoComplete自动完成 - 图1

    基本使用

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

    1. <template>
    2.   <a-auto-complete
    3.     :dataSource="dataSource"
    4.     style="width: 200px"
    5.     @select="onSelect"
    6.     @search="handleSearch"
    7.     placeholder="input here"
    8.   />
    9. </template>
    10. <script>
    11. export default {
    12.   data() {
    13.     return {
    14.       dataSource: [],
    15.     }
    16.   },
    17.   methods: {
    18.     handleSearch(value) {
    19.       this.dataSource = !value ? [] : [
    20.         value,
    21.         value + value,
    22.         value + value + value,
    23.       ]
    24.     },
    25.     onSelect(value) {
    26.       console.log('onSelect', value);
    27.     }
    28.   }
    29. }
    30. </script>

    AutoComplete自动完成 - 图2

    查询模式 - 确定类目

    查询模式 - 确定类目

    1. <template>
    2.   <div class="certain-category-search-wrapper" style="width: 250px">
    3.     <a-auto-complete
    4.       class="certain-category-search"
    5.       dropdownClassName="certain-category-search-dropdown"
    6.       :dropdownMatchSelectWidth="false"
    7.       :dropdownStyle="{width: '300px'}"
    8.       size="large"
    9.       style="width: 100%"
    10.       placeholder="input here"
    11.       optionLabelProp="value"
    12.     >
    13.       <template slot="dataSource">
    14.         <a-select-opt-group
    15.           v-for="group in dataSource"
    16.           :key="group.title"
    17.         >
    18.           <span slot="label">
    19.             {{group.title}}
    20.             <a
    21.               style="float: right"
    22.               href="https://www.google.com/search?q=antd"
    23.               target="_blank"
    24.               rel="noopener noreferrer"
    25.             >更多
    26.             </a>
    27.           </span>
    28.           <a-select-option v-for="opt in group.children" :key="opt.title" :value="opt.title">
    29.             {{opt.title}}
    30.             <span class="certain-search-item-count">{{opt.count}} 人 关注</span>
    31.           </a-select-option>
    32.         </a-select-opt-group>
    33.         <a-select-option disabled key="all" class="show-all">
    34.           <a
    35.             href="https://www.google.com/search?q=antd"
    36.             target="_blank"
    37.             rel="noopener noreferrer"
    38.           >
    39.             查看所有结果
    40.           </a>
    41.         </a-select-option>
    42.       </template>
    43.       <a-input>
    44.         <a-icon slot="suffix" type="search" class="certain-category-icon" />
    45.       </a-input>
    46.     </a-auto-complete>
    47.   </div>
    48. </template>
    49. <script>
    50. const dataSource = [{
    51.   title: '话题',
    52.   children: [{
    53.     title: 'AntDesign',
    54.     count: 10000,
    55.   }, {
    56.     title: 'AntDesign UI',
    57.     count: 10600,
    58.   }],
    59. }, {
    60.   title: '问题',
    61.   children: [{
    62.     title: 'AntDesign UI 有多好',
    63.     count: 60100,
    64.   }, {
    65.     title: 'AntDesign 是啥',
    66.     count: 30010,
    67.   }],
    68. }, {
    69.   title: '文章',
    70.   children: [{
    71.     title: 'AntDesign 是一个设计语言',
    72.     count: 100000,
    73.   }],
    74. }];
    75. export default {
    76.   data() {
    77.     return {
    78.       dataSource,
    79.     }
    80.   },
    81. }
    82. </script>
    83. <style>
    84. .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
    85.   color: #666;
    86.   font-weight: bold;
    87. }
    89. .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
    90.   border-bottom: 1px solid #F6F6F6;
    91. }
    93. .certain-category-search-dropdown .ant-select-dropdown-menu-item {
    94.   padding-left: 16px;
    95. }
    97. .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
    98.   text-align: center;
    99.   cursor: default;
    100. }
    102. .certain-category-search-dropdown .ant-select-dropdown-menu {
    103.   max-height: 300px;
    104. }
    105. </style>
    106. <style scoped>
    107.   .certain-category-search-wrapper >>> .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
    108.     right: 12px;
    109.   }
    110.   .certain-category-search-wrapper >>> .certain-search-item-count {
    111.     position: absolute;
    112.     color: #999;
    113.     right: 16px;
    114.   }
    115.   .certain-category-search-wrapper >>> .certain-category-search.ant-select-focused .certain-category-icon {
    116.     color: #108ee9;
    117.   }
    118.   .certain-category-search-wrapper >>> .certain-category-icon {
    119.     color: #6E6E6E;
    120.     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    121.     font-size: 16px;
    122.   }
    123. </style>

    AutoComplete自动完成 - 图3

    自定义输入组件

    自定义输入组件。

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

    AutoComplete自动完成 - 图4

    不区分大小写

    不区分大小写的 AutoComplete

    1. <template>
    2.   <a-auto-complete
    3.     :dataSource="dataSource"
    4.     style="width: 200px"
    5.     placeholder="input here"
    6.     :filterOption="filterOption"
    7.   />
    8. </template>
    9. <script>
    10. export default {
    11.   data() {
    12.     return {
    13.       dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
    14.     }
    15.   },
    16.   methods: {
    17.     filterOption(input, option) {
    18.       return option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
    19.     }
    20.   }
    21. }
    22. </script>

    AutoComplete自动完成 - 图5

    自定义选项

    也可以直接传递slot="dataSource"的Option

    1. <template>
    2.   <a-auto-complete
    3.     style="width: 200px"
    4.     @search="handleSearch"
    5.     placeholder="input here"
    6.   >
    7.     <template slot="dataSource">
    8.       <a-select-option v-for="email in result"  :key="email">{{email}}</a-select-option>
    9.     </template>
    10.   </a-auto-complete>
    11. </template>
    12. <script>
    13. export default {
    14.   data() {
    15.     return {
    16.       result: [],
    17.     }
    18.   },
    19.   methods: {
    20.     handleSearch(value) {
    21.       let result;
    22.       if (!value || value.indexOf('@') >= 0) {
    23.         result = [];
    24.       } else {
    25.         result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    26.       }
    27.       this.result = result
    28.     },
    29.   }
    30. }
    31. </script>

    AutoComplete自动完成 - 图6

    查询模式 - 不确定类目

    查询模式 - 不确定类目

    1. <template>
    2.   <div class="global-search-wrapper" style="width: 300px">
    3.     <a-auto-complete
    4.       class="global-search"
    5.       size="large"
    6.       style="width: 100%"
    7.       @select="onSelect"
    8.       @search="handleSearch"
    9.       placeholder="input here"
    10.       optionLabelProp="text"
    11.     >
    12.       <template slot="dataSource">
    13.         <a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">
    14.           {{item.query}} 在
    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.           区块中
    23.           <span className="global-search-item-count">约 {{item.count}} 个结果</span>
    24.         </a-select-option>
    25.       </template>
    26.       <a-input>
    27.         <a-button slot="suffix" class="search-btn" size="large" type="primary">
    28.           <a-icon type="search" />
    29.         </a-button>
    30.       </a-input>
    31.     </a-auto-complete>
    32.   </div>
    33. </template>
    34. <script>
    35. export default {
    36.   data() {
    37.     return {
    38.       dataSource: [],
    39.     }
    40.   },
    41.   methods: {
    42.     onSelect(value) {
    43.       console.log('onSelect', value);
    44.     },
    46.     handleSearch(value) {
    47.       this.dataSource = value ? this.searchResult(value) : []
    48.     },
    50.     getRandomInt(max, min = 0) {
    51.       return Math.floor(Math.random() * (max - min + 1)) + min;
    52.     },
    54.     searchResult(query) {
    55.       return (new Array(this.getRandomInt(5))).join('.').split('.')
    56.         .map((item, idx) => ({
    57.           query,
    58.           category: `${query}${idx}`,
    59.           count: this.getRandomInt(200, 100),
    60.         }));
    61.     }
    62.   }
    63. }
    64. </script>
    66. <style>
    67. .global-search-wrapper {
    68.   padding-right: 50px;
    69. }
    71. .global-search {
    72.   width: 100%;
    73. }
    75. .global-search.ant-select-auto-complete .ant-select-selection--single {
    76.   margin-right: -46px;
    77. }
    79. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
    80.   padding-right: 62px;
    81. }
    83. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
    84.   right: 0;
    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-count {
    93.   position: absolute;
    94.   right: 16px;
    95. }
    96. </style>

    API

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