import React from 'react'
import { AutoComplete } from 'rsuite';

const data = [
  'Eugenia',
  'Bryan',
  'Linda',
  'Nancy',
  'Lloyd',
  'Alice',
  'Julia',
  'Albert',
  'Louisa',
  'Lester',
  'Lola',
  'Lydia',
  'Hal',
  'Hannah',
  'Harriet',
  'Hattie',
  'Hazel',
  'Hilda'
];
const suffixes = ['@gmail.com', '@sina.com.cn', '@163.com', '@qq.com'];
const AutocompleteSearch = () => {
    const [data, setData] = React.useState([]);

    const handleChange = value => {
      const at = value.match(/@[\S]*/);
      const nextData = at
        ? suffixes
            .filter(item => item.indexOf(at[0]) >= 0)
            .map(item => {
              return `${value}${item.replace(at[0], '')}`;
            })
        : suffixes.map(item => `${value}${item}`);
  
      setData(nextData);
    };
  
    return (
      <AutoComplete data={data} placeholder="Email" onChange={handleChange} style={{ width: 224 }} />
    );
}

export default AutocompleteSearch