import React, { useState } from 'react'; import { CloseSquareFilled } from '@ant-design/icons'; import { AutoComplete } from 'antd'; import type { AutoCompleteProps } from 'antd'; const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat), }); const App: React.FC = () => { const [options, setOptions] = useState<AutoCompleteProps['options']>([]); const getPanelValue = (searchText: string) => !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; return ( <> <AutoComplete options={options} style={{ width: 200 }} onSearch={(text) => setOptions(getPanelValue(text))} placeholder="UnClearable" allowClear={false} /> <br /> <br /> <AutoComplete options={options} style={{ width: 200 }} onSearch={(text) => setOptions(getPanelValue(text))} placeholder="Customized clear icon" allowClear={{ clearIcon: <CloseSquareFilled /> }} /> </> ); }; export default App;