In this tutorial, we will create autocomplete in react with ant design 5. First you need to setup react with ant design 5 project.

install & setup vite + react + typescript + ant design 5

1.Create a simple autocomplete in React using Ant Design 5's AutoComplete component and the useState hook.

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

const mockVal = ( str : string , repeat = 1 ) => ({ value : str . repeat ( repeat ), });

const App : React . FC = () => { const [ value , setValue ] = useState ( '' ); const [ options , setOptions ] = useState < { value : string }[] > ([]); const [ anotherOptions , setAnotherOptions ] = useState < { value : string }[] > ([]);

const getPanelValue = ( searchText : string ) => ! searchText ? [] : [ mockVal ( searchText ), mockVal ( searchText , 2 ), mockVal ( searchText , 3 )];

const onSelect = ( data : string ) => { console .…