javascript - 如何在文本框/文本区域/文本输入中显示自动完成

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'));

我想覆盖此行为或创建一个自己的自动完成功能以在文本输入中显示不使用jquery

Answer 1

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