ant-design/components/auto-complete/demo/options.md
黑雨 87aad19fc8
feat: AutoComplete edit demo to data driven (#37592)
* feat: edit demo to data driven

* feat: update lint

* feat: update lint
2022-09-19 11:28:36 +08:00

882 B

order title
2
zh-CN en-US
自定义选项 Customized

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;