AutoComplete 自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

代码演示

基本使用

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

AutoComplete自动完成 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { AutoComplete } from 'choerodon-ui';
  4. function onSelect(value) {
  5. console.log('onSelect', value);
  6. }
  7. class Complete extends React.Component {
  8. state = {
  9. dataSource: [],
  10. }
  11. handleSearch = (value) => {
  12. this.setState({
  13. dataSource: !value ? [] : [
  14. value,
  15. value + value,
  16. value + value + value,
  17. ],
  18. });
  19. }
  20. render() {
  21. const { dataSource } = this.state;
  22. return (
  23. <AutoComplete
  24. dataSource={dataSource}
  25. style={{ width: 200 }}

自定义选项

也可以直接传 AutoComplete.Option 作为 AutoCompletechildren,而非使用 dataSource

AutoComplete自动完成 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { AutoComplete } from 'choerodon-ui';
  4. const Option = AutoComplete.Option;
  5. class Complete extends React.Component {
  6. state = {
  7. result: [],
  8. }
  9. handleSearch = (value) => {
  10. let result;
  11. if (!value || value.indexOf('@') >= 0) {
  12. result = [];
  13. } else {
  14. result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
  15. }
  16. this.setState({ result });
  17. }
  18. render() {
  19. const { result } = this.state;
  20. const children = result.map((email) => {
  21. return <Option key={email}>{email}</Option>;
  22. });
  23. return (
  24. <AutoComplete
  25. style={{ width: 200 }}

自定义输入组件

自定义输入组件。

AutoComplete自动完成 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { AutoComplete, Input } from 'choerodon-ui';
  4. const { TextArea } = Input;
  5. function onSelect(value) {
  6. console.log('onSelect', value);
  7. }
  8. class Complete extends React.Component {
  9. state = {
  10. dataSource: [],
  11. };
  12. handleSearch = value => {
  13. this.setState({
  14. dataSource: !value ? [] : [value, value + value, value + value + value],
  15. });
  16. };
  17. handleKeyPress = ev => {
  18. console.log('handleKeyPress', ev);
  19. };
  20. render() {
  21. const { dataSource } = this.state;
  22. return (
  23. <AutoComplete

不区分大小写

不区分大小写的 AutoComplete

AutoComplete自动完成 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { AutoComplete } from 'choerodon-ui';
  4. 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) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
  12. />
  13. );
  14. }
  15. ReactDOM.render(<Complete />, document.getElementById('container'));

查询模式 - 确定类目

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

AutoComplete自动完成 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, Input, AutoComplete } from 'choerodon-ui';
  4. const Option = AutoComplete.Option;
  5. const OptGroup = AutoComplete.OptGroup;
  6. const dataSource = [{
  7. title: '话题',
  8. children: [{
  9. title: 'AntDesign',
  10. count: 10000,
  11. }, {
  12. title: 'AntDesign UI',
  13. count: 10600,
  14. }],
  15. }, {
  16. title: '问题',
  17. children: [{
  18. title: 'AntDesign UI 有多好',
  19. count: 60100,
  20. }, {
  21. title: 'AntDesign 是啥',
  22. count: 30010,
  23. }],
  24. }, {
  25. title: '文章',
  26. children: [{
  27. title: 'AntDesign 是一个设计语言',

查询模式 - 不确定类目

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

AutoComplete自动完成 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Button, Input, AutoComplete } from 'choerodon-ui';
  4. const Option = AutoComplete.Option;
  5. function onSelect(value) {
  6. console.log('onSelect', value);
  7. }
  8. function getRandomInt(max, min = 0) {
  9. return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
  10. }
  11. function searchResult(query) {
  12. return (new Array(getRandomInt(5))).join('.').split('.')
  13. .map((item, idx) => ({
  14. query,
  15. category: `${query}${idx}`,
  16. count: getRandomInt(200, 100),
  17. }));
  18. }
  19. function renderOption(item) {
  20. return (
  21. <Option key={item.category} text={item.category}>
  22. {item.query}
  23. <a
  24. href={`https://s.taobao.com/search?q=${item.query}`}

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[]|{ 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()获取焦点