AutoComplete 自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

代码演示

AutoComplete自动完成 - 图1

基本使用

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

  1. <template>
  2. <div>
  3. <a-auto-complete
  4. :data-source="dataSource"
  5. style="width: 200px"
  6. placeholder="input here"
  7. @select="onSelect"
  8. @search="onSearch"
  9. />
  10. <br />
  11. <br />
  12. <a-auto-complete
  13. :value="value"
  14. :data-source="dataSource"
  15. style="width: 200px"
  16. placeholder="control mode"
  17. @select="onSelect"
  18. @search="onSearch"
  19. @change="onChange"
  20. />
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. value: '',
  28. dataSource: [],
  29. };
  30. },
  31. methods: {
  32. onSearch(searchText) {
  33. this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
  34. },
  35. onSelect(value) {
  36. console.log('onSelect', value);
  37. },
  38. onChange(value) {
  39. this.value = value;
  40. },
  41. },
  42. };
  43. </script>

AutoComplete自动完成 - 图2

自定义输入组件

自定义输入组件。

  1. <template>
  2. <a-auto-complete
  3. :data-source="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 ? [] : [value, value + value, value + value + value];
  29. },
  30. handleKeyPress(ev) {
  31. console.log('handleKeyPress', ev);
  32. },
  33. },
  34. };
  35. </script>

AutoComplete自动完成 - 图3

自定义选项

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

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

AutoComplete自动完成 - 图4

查询模式 - 确定类目

查询模式 - 确定类目

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

AutoComplete自动完成 - 图5

不区分大小写

不区分大小写的 AutoComplete

  1. <template>
  2. <a-auto-complete
  3. :data-source="dataSource"
  4. style="width: 200px"
  5. placeholder="input here"
  6. :filter-option="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 (
  19. option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
  20. );
  21. },
  22. },
  23. };
  24. </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. placeholder="input here"
  8. option-label-prop="text"
  9. @select="onSelect"
  10. @search="handleSearch"
  11. >
  12. <template slot="dataSource">
  13. <a-select-option v-for="item in dataSource" :key="item.category" :text="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 className="global-search-item-count">{{ item.count }} results</span>
  23. </a-select-option>
  24. </template>
  25. <a-input>
  26. <a-button
  27. slot="suffix"
  28. style="margin-right: -12px"
  29. class="search-btn"
  30. size="large"
  31. type="primary"
  32. >
  33. <a-icon type="search" />
  34. </a-button>
  35. </a-input>
  36. </a-auto-complete>
  37. </div>
  38. </template>
  39. <script>
  40. export default {
  41. data() {
  42. return {
  43. dataSource: [],
  44. };
  45. },
  46. methods: {
  47. onSelect(value) {
  48. console.log('onSelect', value);
  49. },
  50. handleSearch(value) {
  51. this.dataSource = value ? this.searchResult(value) : [];
  52. },
  53. getRandomInt(max, min = 0) {
  54. return Math.floor(Math.random() * (max - min + 1)) + min;
  55. },
  56. searchResult(query) {
  57. return new Array(this.getRandomInt(5))
  58. .join('.')
  59. .split('.')
  60. .map((item, idx) => ({
  61. query,
  62. category: `${query}${idx}`,
  63. count: this.getRandomInt(200, 100),
  64. }));
  65. },
  66. },
  67. };
  68. </script>
  69. <style>
  70. .global-search-wrapper {
  71. padding-right: 50px;
  72. }
  73. .global-search {
  74. width: 100%;
  75. }
  76. .global-search.ant-select-auto-complete .ant-select-selection--single {
  77. margin-right: -46px;
  78. }
  79. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
  80. padding-right: 62px;
  81. }
  82. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
  83. border-top-left-radius: 0;
  84. border-bottom-left-radius: 0;
  85. }
  86. .global-search-item {
  87. display: flex;
  88. }
  89. .global-search-item-desc {
  90. flex: auto;
  91. text-overflow: ellipsis;
  92. overflow: hidden;
  93. }
  94. .global-search-item-count {
  95. flex: none;
  96. }
  97. </style>

API

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