Solution

To make autocomplete using ant design in react js, first install ant design library using npm install antd command and then import AutoComplete from it and use to create autocomplete using ant design.

Snippet

In this snippet, this is short example of make autocomplete component from the antd library.

import { AutoComplete, Input } from 'antd';


<AutoComplete
  options={options}
  style={{
    width: 200,
  }}
  onSelect={onSelect}
  onSearch={handleSearch}
>
  <TextArea
    placeholder="input here"
    className="custom"
    style={{
      height: 50,
    }}
    onKeyPress={handleKeyPress}
  />
</AutoComplete>

Example

In this example, we will import autocomplete from antd library, create autocomplete component, and provide appropriate data to make autocomplete.

Let’s start coding…

App.js

import { AutoComplete, Input } from 'antd';
import { useState } from 'react';

const { TextArea } = Input;
const App = () => {
const [options, setOptions] = useState([]);
const handleSearch = (value) => {
    setOptions(
      !value
        ? []
        : [
            {
              value,
            },
            {
              value: value + value,
            },
            {
              value: value + value + value,
            },
          ],
    );
  };
  const handleKeyPress = (ev) => {
    console.log('handleKeyPress', ev);
  };
  const onSelect = (value) => {
    console.log('onSelect', value);
  };
  return (
    <AutoComplete
      options={options}
      style={{
        width: 200,
      }}
      onSelect={onSelect}
      onSearch={handleSearch}
    >
      <TextArea
        placeholder="input here"
        className="custom"
        style={{
          height: 50,
        }}
        onKeyPress={handleKeyPress}
      />
    </AutoComplete>
  );
};
export default App;

Output

target, autocomplete

Here, we are provided code sandbox links for the above program make autocomplete using ant design. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.