• AutoComplete自动完成
    • 何时使用
    • 代码演示
    • API
    • 方法

    AutoComplete自动完成

    输入框自动完成功能。

    何时使用

    需要自动完成时。

    代码演示

    AutoComplete 自动完成 - 图1

    基本使用

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

    1. import { AutoComplete } from 'antd';
    3. function onSelect(value) {
    4.   console.log('onSelect', value);
    5. }
    7. class Complete extends React.Component {
    8.   state = {
    9.     dataSource: [],
    10.   };
    12.   handleSearch = value => {
    13.     this.setState({
    14.       dataSource: !value ? [] : [value, value + value, value + value + value],
    15.     });
    16.   };
    18.   render() {
    19.     const { dataSource } = this.state;
    20.     return (
    21.       <AutoComplete
    22.         dataSource={dataSource}
    23.         style={{ width: 200 }}
    24.         onSelect={onSelect}
    25.         onSearch={this.handleSearch}
    26.         placeholder="input here"
    27.       />
    28.     );
    29.   }
    30. }
    32. ReactDOM.render(<Complete />, mountNode);

    AutoComplete 自动完成 - 图2

    自定义输入组件

    自定义输入组件。

    1. import { AutoComplete, Input } from 'antd';
    3. const { TextArea } = Input;
    5. function onSelect(value) {
    6.   console.log('onSelect', value);
    7. }
    9. class Complete extends React.Component {
    10.   state = {
    11.     dataSource: [],
    12.   };
    14.   handleSearch = value => {
    15.     this.setState({
    16.       dataSource: !value ? [] : [value, value + value, value + value + value],
    17.     });
    18.   };
    20.   handleKeyPress = ev => {
    21.     console.log('handleKeyPress', ev);
    22.   };
    24.   render() {
    25.     const { dataSource } = this.state;
    26.     return (
    27.       <AutoComplete
    28.         dataSource={dataSource}
    29.         style={{ width: 200 }}
    30.         onSelect={onSelect}
    31.         onSearch={this.handleSearch}
    32.       >
    33.         <TextArea
    34.           placeholder="input here"
    35.           className="custom"
    36.           style={{ height: 50 }}
    37.           onKeyPress={this.handleKeyPress}
    38.         />
    39.       </AutoComplete>
    40.     );
    41.   }
    42. }
    44. ReactDOM.render(<Complete />, mountNode);

    AutoComplete 自动完成 - 图3

    查询模式 - 确定类目

    查询模式: 确定类目 示例。

    1. import { Icon, Input, AutoComplete } from 'antd';
    3. const Option = AutoComplete.Option;
    4. const OptGroup = AutoComplete.OptGroup;
    6. const dataSource = [
    7.   {
    8.     title: '话题',
    9.     children: [
    10.       {
    11.         title: 'AntDesign',
    12.         count: 10000,
    13.       },
    14.       {
    15.         title: 'AntDesign UI',
    16.         count: 10600,
    17.       },
    18.     ],
    19.   },
    20.   {
    21.     title: '问题',
    22.     children: [
    23.       {
    24.         title: 'AntDesign UI 有多好',
    25.         count: 60100,
    26.       },
    27.       {
    28.         title: 'AntDesign 是啥',
    29.         count: 30010,
    30.       },
    31.     ],
    32.   },
    33.   {
    34.     title: '文章',
    35.     children: [
    36.       {
    37.         title: 'AntDesign 是一个设计语言',
    38.         count: 100000,
    39.       },
    40.     ],
    41.   },
    42. ];
    44. function renderTitle(title) {
    45.   return (
    46.     <span>
    47.       {title}
    48.       <a
    49.         style={{ float: 'right' }}
    50.         href="https://www.google.com/search?q=antd"
    51.         target="_blank"
    52.         rel="noopener noreferrer"
    53.       >
    54.         更多
    55.       </a>
    56.     </span>
    57.   );
    58. }
    60. const options = dataSource
    61.   .map(group => (
    62.     <OptGroup key={group.title} label={renderTitle(group.title)}>
    63.       {group.children.map(opt => (
    64.         <Option key={opt.title} value={opt.title}>
    65.           {opt.title}
    66.           <span className="certain-search-item-count">{opt.count} 人 关注</span>
    67.         </Option>
    68.       ))}
    69.     </OptGroup>
    70.   ))
    71.   .concat([
    72.     <Option disabled key="all" className="show-all">
    73.       <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
    74.         查看所有结果
    75.       </a>
    76.     </Option>,
    77.   ]);
    79. function Complete() {
    80.   return (
    81.     <div className="certain-category-search-wrapper" style={{ width: 250 }}>
    82.       <AutoComplete
    83.         className="certain-category-search"
    84.         dropdownClassName="certain-category-search-dropdown"
    85.         dropdownMatchSelectWidth={false}
    86.         dropdownStyle={{ width: 300 }}
    87.         size="large"
    88.         style={{ width: '100%' }}
    89.         dataSource={options}
    90.         placeholder="input here"
    91.         optionLabelProp="value"
    92.       >
    93.         <Input suffix={<Icon type="search" className="certain-category-icon" />} />
    94.       </AutoComplete>
    95.     </div>
    96.   );
    97. }
    99. ReactDOM.render(<Complete />, mountNode);
    1. .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
    2.   right: 12px;
    3. }
    5. .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
    6.   color: #666;
    7.   font-weight: bold;
    8. }
    10. .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
    11.   border-bottom: 1px solid #f6f6f6;
    12. }
    14. .certain-category-search-dropdown .ant-select-dropdown-menu-item {
    15.   padding-left: 16px;
    16. }
    18. .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
    19.   text-align: center;
    20.   cursor: default;
    21. }
    23. .certain-category-search-dropdown .ant-select-dropdown-menu {
    24.   max-height: 300px;
    25. }
    27. .certain-search-item-count {
    28.   position: absolute;
    29.   color: #999;
    30.   right: 16px;
    31. }
    33. .certain-category-search.ant-select-focused .certain-category-icon {
    34.   color: #108ee9;
    35. }
    37. .certain-category-icon {
    38.   color: #6e6e6e;
    39.   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    40.   font-size: 16px;
    41. }

    AutoComplete 自动完成 - 图4

    自定义选项

    也可以直接传 AutoComplete.Option 作为 AutoComplete 的 children，而非使用 dataSource。

    1. import { AutoComplete } from 'antd';
    3. const Option = AutoComplete.Option;
    5. class Complete extends React.Component {
    6.   state = {
    7.     result: [],
    8.   };
    10.   handleSearch = value => {
    11.     let result;
    12.     if (!value || value.indexOf('@') >= 0) {
    13.       result = [];
    14.     } else {
    15.       result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    16.     }
    17.     this.setState({ result });
    18.   };
    20.   render() {
    21.     const { result } = this.state;
    22.     const children = result.map(email => <Option key={email}>{email}</Option>);
    23.     return (
    24.       <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="input here">
    25.         {children}
    26.       </AutoComplete>
    27.     );
    28.   }
    29. }
    31. ReactDOM.render(<Complete />, mountNode);

    AutoComplete 自动完成 - 图5

    不区分大小写

    不区分大小写的 AutoComplete

    1. import { AutoComplete } from 'antd';
    3. const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
    5. function Complete() {
    6.   return (
    7.     <AutoComplete
    8.       style={{ width: 200 }}
    9.       dataSource={dataSource}
    10.       placeholder="try to type `b`"
    11.       filterOption={(inputValue, option) =>
    12.         option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
    13.       }
    14.     />
    15.   );
    16. }
    18. ReactDOM.render(<Complete />, mountNode);

    AutoComplete 自动完成 - 图6

    查询模式 - 不确定类目

    查询模式: 不确定类目 示例。

    1. import { Icon, Button, Input, AutoComplete } from 'antd';
    3. const Option = AutoComplete.Option;
    5. function onSelect(value) {
    6.   console.log('onSelect', value);
    7. }
    9. function getRandomInt(max, min = 0) {
    10.   return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
    11. }
    13. function searchResult(query) {
    14.   return new Array(getRandomInt(5))
    15.     .join('.')
    16.     .split('.')
    17.     .map((item, idx) => ({
    18.       query,
    19.       category: `${query}${idx}`,
    20.       count: getRandomInt(200, 100),
    21.     }));
    22. }
    24. function renderOption(item) {
    25.   return (
    26.     <Option key={item.category} text={item.category}>
    27.       <div className="global-search-item">
    28.         <span className="global-search-item-desc">
    29.           {item.query} 在
    30.           <a
    31.             href={`https://s.taobao.com/search?q=${item.query}`}
    32.             target="_blank"
    33.             rel="noopener noreferrer"
    34.           >
    35.             {item.category}
    36.           </a>
    37.           区块中
    38.         </span>
    39.         <span className="global-search-item-count">约 {item.count} 个结果</span>
    40.       </div>
    41.     </Option>
    42.   );
    43. }
    45. class Complete extends React.Component {
    46.   state = {
    47.     dataSource: [],
    48.   };
    50.   handleSearch = value => {
    51.     this.setState({
    52.       dataSource: value ? searchResult(value) : [],
    53.     });
    54.   };
    56.   render() {
    57.     const { dataSource } = this.state;
    58.     return (
    59.       <div className="global-search-wrapper" style={{ width: 300 }}>
    60.         <AutoComplete
    61.           className="global-search"
    62.           size="large"
    63.           style={{ width: '100%' }}
    64.           dataSource={dataSource.map(renderOption)}
    65.           onSelect={onSelect}
    66.           onSearch={this.handleSearch}
    67.           placeholder="input here"
    68.           optionLabelProp="text"
    69.         >
    70.           <Input
    71.             suffix={
    72.               <Button className="search-btn" size="large" type="primary">
    73.                 <Icon type="search" />
    74.               </Button>
    75.             }
    76.           />
    77.         </AutoComplete>
    78.       </div>
    79.     );
    80.   }
    81. }
    83. ReactDOM.render(<Complete />, mountNode);
    1. .global-search-wrapper {
    2.   padding-right: 50px;
    3. }
    5. .global-search {
    6.   width: 100%;
    7. }
    9. .global-search.ant-select-auto-complete .ant-select-selection--single {
    10.   margin-right: -46px;
    11. }
    13. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
    14.   padding-right: 62px;
    15. }
    17. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
    18.   right: 0;
    19. }
    21. .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
    22.   border-top-left-radius: 0;
    23.   border-bottom-left-radius: 0;
    24. }
    26. .global-search-item {
    27.   display: flex;
    28. }
    30. .global-search-item-desc {
    31.   flex: auto;
    32.   text-overflow: ellipsis;
    33.   overflow: hidden;
    34. }
    36. .global-search-item-count {
    37.   flex: none;
    38. }

    API

    1. const dataSource = ['12345', '23456', '34567'];
    2. <AutoComplete dataSource={dataSource} />;
    参数说明类型默认值
    allowClear支持清除, 单选模式有效booleanfalse
    autoFocus自动获取焦点booleanfalse
    backfill使用键盘选择选项的时候把选中项回填到输入框中booleanfalse
    children (自动完成的数据源)自动完成的数据源React.ReactElement / Array<React.ReactElement>-
    children (自定义输入框)自定义输入框HTMLInputElement / HTMLTextAreaElement / React.ReactElement<Input />
    dataSource自动完成的数据源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-
    value指定当前选中的条目string|string[]|{ key: string, label: string|ReactNode }|Array<{ key: string, label: string|ReactNode }>无
    onBlur失去焦点时的回调function()-
    onChange选中 option，或 input 的 value 变化时，调用此函数function(value)无
    onFocus获得焦点时的回调function()-
    onSearch搜索补全项的时候调用function(value)无
    onSelect被选中时调用，参数为选中项的 value 值function(value, option)无
    defaultOpen是否默认展开下拉菜单boolean-
    open是否展开下拉菜单boolean-
    onDropdownVisibleChange展开下拉菜单的回调function(open)-

    方法

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