• 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 ? [] : [value, value + value, value + value + value];
    20.       },
    21.       onSelect(value) {
    22.         console.log('onSelect', value);
    23.       },
    24.     },
    25.   };
    26. </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 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.               >更多
    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}} 人 关注</span>
    28.           </a-select-option>
    29.         </a-select-opt-group>
    30.         <a-select-option disabled key="all" class="show-all">
    31.           <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
    32.             查看所有结果
    33.           </a>
    34.         </a-select-option>
    35.       </template>
    36.       <a-input>
    37.         <a-icon slot="suffix" type="search" class="certain-category-icon" />
    38.       </a-input>
    39.     </a-auto-complete>
    40.   </div>
    41. </template>
    42. <script>
    43.   const dataSource = [
    44.     {
    45.       title: '话题',
    46.       children: [
    47.         {
    48.           title: 'AntDesign',
    49.           count: 10000,
    50.         },
    51.         {
    52.           title: 'AntDesign UI',
    53.           count: 10600,
    54.         },
    55.       ],
    56.     },
    57.     {
    58.       title: '问题',
    59.       children: [
    60.         {
    61.           title: 'AntDesign UI 有多好',
    62.           count: 60100,
    63.         },
    64.         {
    65.           title: 'AntDesign 是啥',
    66.           count: 30010,
    67.         },
    68.       ],
    69.     },
    70.     {
    71.       title: '文章',
    72.       children: [
    73.         {
    74.           title: 'AntDesign 是一个设计语言',
    75.           count: 100000,
    76.         },
    77.       ],
    78.     },
    79.   ];
    80.   export default {
    81.     data() {
    82.       return {
    83.         dataSource,
    84.       };
    85.     },
    86.   };
    87. </script>
    88. <style>
    89.   .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
    90.     color: #666;
    91.     font-weight: bold;
    92.   }
    94.   .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
    95.     border-bottom: 1px solid #f6f6f6;
    96.   }
    98.   .certain-category-search-dropdown .ant-select-dropdown-menu-item {
    99.     padding-left: 16px;
    100.   }
    102.   .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
    103.     text-align: center;
    104.     cursor: default;
    105.   }
    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 自动完成 - 图3

    自定义输入组件

    自定义输入组件。

    <template>
  <a-auto-complete
    :dataSource="dataSource"
    style="width: 200px"
    @search="handleSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
    />
  </a-auto-complete>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [],
      };
    },
    methods: {
      onSelect(value) {
        console.log('onSelect', value);
      },
      handleSearch(value) {
        this.dataSource = !value ? [] : [value, value + value, value + value + value];
      },
      handleKeyPress(ev) {
        console.log('handleKeyPress', ev);
      },
    },
  };
</script>

    AutoComplete 自动完成 - 图4

    不区分大小写

    不区分大小写的 AutoComplete

    <template>
  <a-auto-complete
    :dataSource="dataSource"
    style="width: 200px"
    placeholder="input here"
    :filterOption="filterOption"
  />
</template>
<script>
  export default {
    data() {
      return {
        dataSource: ['Burns Bay Road', 'Downing Street', 'Wall Street'],
      };
    },
    methods: {
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
        );
      },
    },
  };
</script>

    AutoComplete 自动完成 - 图5

    自定义选项

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

    <template>
  <a-auto-complete style="width: 200px" @search="handleSearch" placeholder="input here">
    <template slot="dataSource">
      <a-select-option v-for="email in result" :key="email">{{email}}</a-select-option>
    </template>
  </a-auto-complete>
</template>
<script>
  export default {
    data() {
      return {
        result: [],
      };
    },
    methods: {
      handleSearch(value) {
        let result;
        if (!value || value.indexOf('@') >= 0) {
          result = [];
        } else {
          result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
        }
        this.result = result;
      },
    },
  };
</script>

    AutoComplete 自动完成 - 图6

    查询模式 - 不确定类目

    查询模式 - 不确定类目

    <template>
  <div class="global-search-wrapper" style="width: 300px">
    <a-auto-complete
      class="global-search"
      size="large"
      style="width: 100%"
      @select="onSelect"
      @search="handleSearch"
      placeholder="input here"
      optionLabelProp="text"
    >
      <template slot="dataSource">
        <a-select-option v-for="item in dataSource" :key="item.category" :text="item.category">
          {{item.query}} 在
          <a
            :href="`https://s.taobao.com/search?q=${item.query}`"
            target="_blank"
            rel="noopener noreferrer"
          >
            {{item.category}}
          </a>
          区块中
          <span className="global-search-item-count">约 {{item.count}} 个结果</span>
        </a-select-option>
      </template>
      <a-input>
        <a-button slot="suffix" class="search-btn" size="large" type="primary">
          <a-icon type="search" />
        </a-button>
      </a-input>
    </a-auto-complete>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [],
      };
    },
    methods: {
      onSelect(value) {
        console.log('onSelect', value);
      },

      handleSearch(value) {
        this.dataSource = value ? this.searchResult(value) : [];
      },

      getRandomInt(max, min = 0) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },

      searchResult(query) {
        return new Array(this.getRandomInt(5))
          .join('.')
          .split('.')
          .map((item, idx) => ({
            query,
            category: `${query}${idx}`,
            count: this.getRandomInt(200, 100),
          }));
      },
    },
  };
</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 {
    right: 0;
  }

  .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-count {
    position: absolute;
    right: 16px;
  }
</style>

    API

    <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()获取焦点