Solution

To clear the value of ant design to autocomplete in react js, use the allowClear={true} attribute it will show a small clear icon at the right side of autocomplete and when anyone clicks on it will clear autocomplete value.

Snippet

In this snippet, see the short example of use autocomplete component from ant design library.

<AutoComplete
  options={options}
  style={{
    width: 200
  }}
  onSelect={onSelect}
  onSearch={onSearch}
  placeholder="input here"
  allowClear={true}
/>

Example

In this example, we will import the AutoComplete component from the antd library, use the AutoComplete component, and pass the allowClear attribute into the AutoComplete component.

Let’s start coding…

App.js

import { AutoComplete } from "antd";
import { useState } from "react";
const mockVal = (str, repeat = 1) => ({
  value: str.repeat(repeat)
});
const App = () => {
  const [value, setValue] = useState("");
  const [options, setOptions] = useState([]);
  const onSearch = (searchText) => {
    setOptions(
      !searchText
        ? []
        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
    );
  };
  const onSelect = (data) => {
    console.log("onSelect", data);
  };
  return (
    <>
      <AutoComplete
        options={options}
        style={{
          width: 200
        }}
        onSelect={onSelect}
        onSearch={onSearch}
        placeholder="input here"
        allowClear={true}
      />
    </>
  );
};
export default App;

Output

clear, value

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.