• AutoComplete 自动完成

    输入框自动完成功能。

    何时使用

    需要自动完成时。

    代码演示

    基本使用。通过 dataSource 设置自动完成的数据源
    expand code expand code
    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 }}
            onSelect={onSelect}
            onSearch={this.handleSearch}
            placeholder="input here"
          />
        );
      }
    }
    
    ReactDOM.render(<Complete />, mountNode);
    
    自定义输入组件。
    expand code expand code
    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
            dataSource={dataSource}
            style={{ width: 200 }}
            onSelect={onSelect}
            onSearch={this.handleSearch}
          >
            <TextArea
              placeholder="input here"
              className="custom"
              onKeyPress={this.handleKeyPress}
            />
          </AutoComplete>
        );
      }
    }
    
    ReactDOM.render(<Complete />, mountNode);
    
    查询模式: 确定类目示例。
    expand code expand code
    import { Button, Input, AutoComplete } from 'choerodon-ui';
    
    const Option = AutoComplete.Option;
    const OptGroup = AutoComplete.OptGroup;
    
    const dataSource = [{
      title: '话题',
      children: [{
        title: 'Choerodon',
        count: 10000,
      }, {
        title: 'Choerodon UI',
        count: 10600,
      }],
    }, {
      title: '问题',
      children: [{
        title: 'Choerodon UI 有多好',
        count: 60100,
      }, {
        title: 'Choerodon 是啥',
        count: 30010,
      }],
    }, {
      title: '文章',
      children: [{
        title: 'Choerodon 是一个Paas平台',
        count: 100000,
      }],
    }];
    
    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 }}
            style={{ width: '100%' }}
            dataSource={options}
            placeholder="input here"
            optionLabelProp="value"
          >
            <Input suffix={<Button shape="circle" size="small" funcType="flat" icon="search" />} />
          </AutoComplete>
        </div>
      );
    }
    
    ReactDOM.render(<Complete />, mountNode);
    
    也可以直接传 AutoComplete.Option 作为 AutoCompletechildren,而非使用 dataSource
    expand code expand code
    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 }}
            onSearch={this.handleSearch}
            placeholder="input here"
          >
            {children}
          </AutoComplete>
        );
      }
    }
    
    ReactDOM.render(<Complete />, mountNode);
    
    不区分大小写的 AutoComplete
    expand code expand code
    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 />, mountNode);
    
    查询模式: 不确定类目示例。
    expand code expand code
    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}`}
            target="_blank"
            rel="noopener noreferrer"
          >
            {item.category}
          </a>
          区块中
          <span className="global-search-item-count">约 {item.count} 个结果</span>
        </Option>
      );
    }
    
    class Complete extends React.Component {
      state = {
        dataSource: [],
      }
    
      handleSearch = (value) => {
        this.setState({
          dataSource: value ? searchResult(value) : [],
        });
      }
    
      render() {
        const { dataSource } = this.state;
        return (
          <div className="global-search-wrapper" style={{ width: 300 }}>
            <AutoComplete
              className="global-search"
              style={{ width: '100%' }}
              dataSource={dataSource.map(renderOption)}
              onSelect={onSelect}
              onSearch={this.handleSearch}
              placeholder="input here"
              optionLabelProp="text"
            >
              <Input
                suffix={(
                  <Button size="small" shape="circle" type="primary" icon="search" />
                )}
              />
            </AutoComplete>
          </div>
        );
      }
    }
    
    ReactDOM.render(<Complete />, mountNode);
    

    API

    const dataSource = ['12345', '23456', '34567'];
    <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[]|{ key: string, label: string|ReactNode }|Array<{ key: string, label: string|ReactNode}>
    disabled是否禁用booleanfalse
    filterOption是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 falseboolean or function(inputValue, option)true
    optionLabelProp回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 valuestringchildren
    placeholder输入框提示string-
    value指定当前选中的条目string|string[]|{ key: string, label: string|ReactNode }|Array<{ key: string, label: string|ReactNode }>
    onChange选中 option,或 input 的 value 变化时,调用此函数function(value)
    onSearch搜索补全项的时候调用function(value)
    onSelect被选中时调用,参数为选中项的 value 值function(value, option)

    方法

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