AutoComplete自动完成

需要自动完成时。

基本使用

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

自定义输入组件。

const { TextArea } = Input;
function onSelect(value) {
  console.log('onSelect', value);
}
class Complete extends React.Component {
  state = {
    dataSource: [],
  };
  handleSearch = value => {
    this.setState({
      dataSource: !value ? [] : [value, value + value, value + value + value],
    });
  };
  handleKeyPress = ev => {
    console.log('handleKeyPress', ev);
  };
  render() {
    const { dataSource } = this.state;
    return (
      <AutoComplete
        dataSource={dataSource}
        style={{ width: 200 }}
        onSelect={onSelect}
        onSearch={this.handleSearch}
      >
        <TextArea
          placeholder="input here"
          className="custom"
          style={{ height: 50 }}
          onKeyPress={this.handleKeyPress}
        />
      </AutoComplete>
    );
  }
}
ReactDOM.render(<Complete />, mountNode);

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

import { Icon, Input, AutoComplete } from 'antd';
const Option = AutoComplete.Option;
const OptGroup = AutoComplete.OptGroup;
const dataSource = [
  {
    title: '话题',
    children: [
      {
        title: 'AntDesign',
        count: 10000,
      },
      {
        title: 'AntDesign UI',
        count: 10600,
      },
    ],
  },
  {
    title: '问题',
    children: [
      {
        title: 'AntDesign UI 有多好',
        count: 60100,
      },
      {
        title: 'AntDesign 是啥',
        count: 30010,
      },
  },
  {
    title: '文章',
    children: [
      {
        title: 'AntDesign 是一个设计语言',
      },
    ],
  },
];
function renderTitle(title) {
  return (
    <span>
      {title}
      <a
        style={{ float: 'right' }}
        href="https://www.google.com/search?q=antd"
        target="_blank"
        rel="noopener noreferrer"
      >
        更多
      </a>
    </span>
  );
}
const options = dataSource
  .map(group => (
    <OptGroup key={group.title} label={renderTitle(group.title)}>
      {group.children.map(opt => (
        <Option key={opt.title} value={opt.title}>
          {opt.title}
          <span className="certain-search-item-count">{opt.count} 人 关注</span>
        </Option>
      ))}
    </OptGroup>
  ))
  .concat([
    <Option disabled key="all" className="show-all">
      <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
        查看所有结果
      </a>
    </Option>,
  ]);
function Complete() {
  return (
    <div className="certain-category-search-wrapper" style={{ width: 250 }}>
      <AutoComplete
        className="certain-category-search"
        dropdownClassName="certain-category-search-dropdown"
        dropdownMatchSelectWidth={false}
        dropdownStyle={{ width: 300 }}
        size="large"
        style={{ width: '100%' }}
        dataSource={options}
        placeholder="input here"
        optionLabelProp="value"
      >
        <Input suffix={<Icon type="search" className="certain-category-icon" />} />
      </AutoComplete>
    </div>
  );
}
ReactDOM.render(<Complete />, mountNode);

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

import { AutoComplete } from 'antd';
const Option = AutoComplete.Option;
class Complete extends React.Component {
  state = {
    result: [],
  };
  handleSearch = value => {
    if (!value || value.indexOf('@') >= 0) {
      result = [];
    } else {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    this.setState({ result });
  };
  render() {
    const { result } = this.state;
    const children = result.map(email => <Option key={email}>{email}</Option>);
    return (
      <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="input here">
        {children}
      </AutoComplete>
    );
  }
}
ReactDOM.render(<Complete />, mountNode);

不区分大小写的 AutoComplete

import { AutoComplete } from 'antd';
const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
function Complete() {
  return (
    <AutoComplete
      style={{ width: 200 }}
      dataSource={dataSource}
      placeholder="try to type `b`"
      filterOption={(inputValue, option) =>
        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
      }
    />
  );
}
ReactDOM.render(<Complete />, mountNode);

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

.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 {
  display: flex;
}
.global-search-item-desc {
  flex: auto;
  text-overflow: ellipsis;
  overflow: hidden;
}
.global-search-item-count {
  flex: none;
}

const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />;