import React from 'react'; import { AutoComplete } from '@douyinfe/semi-ui'; import { IconSearch } from '@douyinfe/semi-icons'; () => { const [stringData, setStringData] = useState([]); const [value, setValue] = useState(''); const handleStringSearch = (value) => { let result; if (value) { result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`); } else { result = []; } setStringData(result); }; const handleChange = (value) => { console.log('onChange', value); setValue(value); }; return ( <AutoComplete data={stringData} value={value} showClear prefix={<IconSearch />} placeholder="Search... " onSearch={handleStringSearch} onChange={handleChange} style={{ width: 200 }} /> ); };

import React from 'react'; import { AutoComplete, Avatar } from '@douyinfe/semi-ui'; import { IconSearch } from '@douyinfe/semi-icons'; class CustomOptionDemo extends React.Component { constructor() { super(); this.state = { data: [], color: ['amber', 'indigo', 'cyan'], list: [ { name: 'Xia', email: 'xiakeman@example.com', abbr: 'XK', color: 'amber' }, { name: 'Shen', email: 'shenyue@example.com', abbr: 'SY', color: 'indigo' }, { name: 'Qu', email: 'quchenyi@example.com', abbr: 'CY', color: 'blue' }, { name: 'Wen', email: 'wenjiamao@example.com', abbr: 'JM', color: 'cyan' }, ], }; } search(value) { let result; if (value) { result = this.state.list.map(item => { return { ...item, value: item.name, label: item.email }; }); } else { result = []; } this.setState({ data: result }); } renderOption(item) { let optionStyle = { display: 'flex', }; return ( <> <Avatar color={item.color} size="small"> {item.abbr} </Avatar> <div style={{ marginLeft: 4 }}> <div style={{ fontSize: 14, marginLeft: 4 }}>{item.name}</div> <div style={{ marginLeft: 4 }}>{item.email}</div> </div> </> ); } render() { return ( <AutoComplete data={this.state.data} prefix={<IconSearch />} style={{ width: '250px' }} renderSelectedItem={option => option.email} renderItem={this.renderOption} onSearch={this.search.bind(this)} onSelect={v => console.log(v)} ></AutoComplete> ); } }

import React from 'react'; import { AutoComplete } from '@douyinfe/semi-ui'; import { IconSearch } from '@douyinfe/semi-icons'; class ObjectDemo extends React.Component { constructor() { super(); this.state = { list: [ { value: 'abc', label: 'douyin', email: '1@gmail.com', type: 2 }, { value: 'hotsoon', label: 'huoshan', email: '2@gmail.com', type: 3 }, { value: 'pipixia', label: 'pip', email: '3@gmail.com' }, ], loading: false, }; this.onSearch = this.onSearch.bind(this); this.handleSelect = this.handleSelect.bind(this); this.renderItem = this.renderItem.bind(this); this.renderSelectedItem = this.renderSelectedItem.bind(this); this.search = debounce(this.search.bind(this), 200); } onSearch(inputValue) { this.setState({ loading: true }); this.search(inputValue); } search(inputValue) { let { list } = this.state; const newList = list.map(item => { let num = Math.random() .toString() .slice(2, 5); let option = inputValue + '-' + num; return { ...item, label: 'Name:' + option, value: option }; }); this.setState({ list: newList, loading: false }); } handleSelect(value) { console.log(value); } renderItem(item) { return ( <div> <div>{item.label}</div> <div>email: {item.email}</div> <div style={{ color: 'pink' }}>value: {item.value}</div> </div> ); } renderSelectedItem(item) { // Note: Unlike Select, only String type values can be returned here, ReactNode cannot be returned return item.value; } render() { const { loading } = this.state; return ( <div> <AutoComplete data={this.state.list} style={{ width: 250 }} prefix={<IconSearch />} onSearch={this.onSearch} loading={loading} onChangeWithObject renderItem={this.renderItem} renderSelectedItem={this.renderSelectedItem} onSelect={this.handleSelect} ></AutoComplete> </div> ); } }

import React from 'react'; import { AutoComplete } from '@douyinfe/semi-ui'; () => ( <div> <AutoComplete data={[1, 2, 3, 4]} size="small" placeholder={'small'} style={{ width: 200 }} ></AutoComplete> <br /> <br /> <AutoComplete data={[1, 2, 3, 4]} size="default" placeholder={'default'} style={{ width: 200 }} ></AutoComplete> <br /> <br /> <AutoComplete data={[1, 2, 3, 4]} size="large" placeholder={'large'} style={{ width: 200 }} ></AutoComplete> </div> );

import React from 'react'; import { AutoComplete } from '@douyinfe/semi-ui'; () => ( <div> <AutoComplete data={[1, 2, 3, 4]} position="top" placeholder="The options menu is shown at the top" style={{ width: 200, margin: 10 }} ></AutoComplete> <AutoComplete data={[1, 2, 3, 4]} position="rightTop" placeholder="The options menu is shown on the right" style={{ width: 200, margin: 10 }} ></AutoComplete> </div> );

import React from 'react'; import { AutoComplete } from '@douyinfe/semi-ui'; () => ( <AutoComplete data={[1, 2, 3, 4]} placeholder={'Disable drop-down menu'} disabled style={{ width: 200 }}></AutoComplete> );

import React from 'react'; import { AutoComplete } from '@douyinfe/semi-ui'; () => ( <> <AutoComplete defaultValue="ies" validateStatus="warning"></AutoComplete> <br /> <br /> <AutoComplete defaultValue="ies" validateStatus="error"></AutoComplete> <br /> <br /> <AutoComplete defaultValue="ies"></AutoComplete> </> );

import React from 'react'; import { AutoComplete, Empty } from '@douyinfe/semi-ui'; import { IllustrationNoContent } from '@douyinfe/semi-illustrations'; () => { let [data, setData] = useState([]); const [loading, setLoading] = useState(false); const fetchData = v => { setLoading(true); setTimeout(() => { if (!v) { setData([]); setLoading(false); return; } setData(() => { const res = Array.from(Array(5)).map(c => Math.random()); return res; }); setLoading(false); }, 1000); }; return ( <AutoComplete loading={loading} data={data} emptyContent={<Empty style={{ padding: 12, width: 300 }} image={<IllustrationNoContent style={{ width: 150, height: 150 }}/>} description={'no content yet'} />} onSearch={fetchData} /> ); };