如何在文本框/ textarea / textinput中显示自动完成功能

Question

我使用antd UI库我的项目，我想表现出内自动完成textarea只对一个词，用户类型。 但是antd似乎不支持该特定功能。

我试图在antd / Html5使用默认的自动完成功能，但没有运气

我尝试了以下示例

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { AutoComplete, Input } from 'antd';

const { TextArea } = Input;

function onSelect(value) {
  console.log('onSelect', value);
}

class Complete extends React.Component {
  state = {
    dataSource: ['test', 'hello'],
  };

  handleSearch = value => {
    // this.setState({
    //   dataSource: !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 />, document.getElementById('container'));

我想重写此行为或创建自己的自动完成以显示在without jquery的textinput内部

Answer 1

您只需要在数组中定义可能的自动完成值，并将其作为dataSource值传递给AutoComplete 。 该示例动态生成自动完成值，但是您不需要这样做。 这是一个示例，说明如何提供可能的自动完成值沙盒