mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-02 15:59:38 +08:00
87aad19fc8
* feat: edit demo to data driven * feat: update lint * feat: update lint
882 B
882 B
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
可以返回自定义的 Option
label
en-US
You could set custom Option
label
import { AutoComplete } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
const handleSearch = (value: string) => {
let res: { value: string; label: string }[] = [];
if (!value || value.indexOf('@') >= 0) {
res = [];
} else {
res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
value,
label: `${value}@${domain}`,
}));
}
setOptions(res);
};
return (
<AutoComplete
style={{ width: 200 }}
onSearch={handleSearch}
placeholder="input here"
options={options}
/>
);
};
export default App;