AutoComplete 自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

代码演示

基本使用

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete } from 'choerodon-ui';
​
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,
      ],
    });
  }
​
  render() {
    const { dataSource } = this.state;
    return (
      <AutoComplete
        dataSource={dataSource}
        style={{ width: 200 }}

自定义选项

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete } from 'choerodon-ui';
​
const Option = AutoComplete.Option;
​
class Complete extends React.Component {
  state = {
    result: [],
  }
​
  handleSearch = (value) => {
    let result;
    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) => {
      return <Option key={email}>{email}</Option>;
    });
    return (
      <AutoComplete
        style={{ width: 200 }}

自定义输入组件

自定义输入组件。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete, Input } from 'choerodon-ui';
​
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

不区分大小写

不区分大小写的 AutoComplete

import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete } from 'choerodon-ui';
​
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 />, document.getElementById('container'));
​

查询模式 - 确定类目

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Input, AutoComplete } from 'choerodon-ui';
​
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 是一个设计语言',

查询模式 - 不确定类目

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

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Input, AutoComplete } from 'choerodon-ui';
​
const Option = AutoComplete.Option;
​
function onSelect(value) {
  console.log('onSelect', value);
}
​
function getRandomInt(max, min = 0) {
  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
}
​
function searchResult(query) {
  return (new Array(getRandomInt(5))).join('.').split('.')
    .map((item, idx) => ({
      query,
      category: `${query}${idx}`,
      count: getRandomInt(200, 100),
    }));
}
​
function renderOption(item) {
  return (
    <Option key={item.category} text={item.category}>
      {item.query} 在
      <a
        href={`https://s.taobao.com/search?q=${item.query}`}

API

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

方法