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
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.