46 lines
966 B
JavaScript
46 lines
966 B
JavaScript
|
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
|