AutoComplete 自动补全

输入框自动完成功能。

何时使用

• 需要一个输入框而不是选择器。
• 需要输入建议/辅助提示。

和 Select 的区别是：

• AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助输入。
• Select 是在限定的可选项中进行选择，关键词是选择。

代码演示

基本使用

基本使用。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete, DataSet } from 'choerodon-ui/pro';
​
class App extends React.Component {
  state = {
    options: new DataSet({
      fields: [{
        name: 'value', type: 'string',
      }, {
        name: 'meaning', type: 'string',
      }],
      data: [{
        value: '1',
        meaning: '1',
      }, {
        value: '12',
        meaning: '12',
      }, {
        value: '123',
        meaning: '123',
      }],
    }),
  }
​
  render() {
    const { options } = this.state
    const optionRenderer = ({ value }) => {
      return `${value}@qq.com`

绑定数据源

绑定数据源

​
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete, DataSet, Tooltip, Icon } from 'choerodon-ui/pro';
​
const data = [{
  user: 'wu',
}];
​
const renderer = ({ text }) => (
  <div style={{ width: '100%' }}>
    {text && <Icon type="people" />} {text}
  </div>
);
​
const optionRenderer = ({ text }) => (
  <Tooltip title={text} placement="left">
    {renderer({ text })}
  </Tooltip>
);
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  ds = new DataSet({
    data,
    fields: [
      { name: 'user', type: 'string', label: '用户' },

动态选项

动态选项。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { AutoComplete, DataSet } from 'choerodon-ui/pro';
​
class App extends React.Component {
  state = {
    options: new DataSet({
      fields: [{
        name: 'value', type: 'string',
      }, {
        name: 'meaning', type: 'string',
      }],
    }),
  }
​
  render() {
    const { options } = this.state
    const handeValueChange = (v) => {
      const value = v.target.value
      const suffixList = ['@qq.com', '@163.com', '@hand-china.com']
      if (value.indexOf('@') !== -1) {
        options.loadData([])
      } else {
        options.loadData(suffixList.map(suffix => ({
          value: `${value}${suffix}`,
          meaning: `${value}${suffix}`,
        })))
      }
    }

API