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
Links
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.
Happy Coding,
I hope the above example with help you to do your task.