77 lines
1.9 KiB
Plaintext
77 lines
1.9 KiB
Plaintext
const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'];
|
|
const countriesObject = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
|
|
|
|
class AutocompleteTest extends React.Component {
|
|
state = {
|
|
simple: 'Spain',
|
|
multiple: ['ES-es', 'TH-th'],
|
|
dynamicSimple: '',
|
|
dynamicSource: {},
|
|
query: ''
|
|
};
|
|
|
|
handleSimpleChange = (value) => {
|
|
this.setState({simple: value});
|
|
};
|
|
|
|
handleDynamicSimpleChange = (value) => {
|
|
this.setState({dynamicSimple: value});
|
|
};
|
|
|
|
handleMultipleChange = (value) => {
|
|
this.setState({multiple: value});
|
|
};
|
|
|
|
handleQueryChange = (value) => {
|
|
this.setState({query: value});
|
|
};
|
|
|
|
generateSource = (event) => {
|
|
const query = event.target.value;
|
|
const source = {
|
|
A: query + ' # A',
|
|
B: query + ' # B'
|
|
};
|
|
this.setState({dynamicSource: source});
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<div>
|
|
<Autocomplete
|
|
direction="down"
|
|
onChange={this.handleMultipleChange}
|
|
label="Choose countries"
|
|
source={countriesObject}
|
|
value={this.state.multiple}
|
|
/>
|
|
|
|
<Autocomplete
|
|
direction="down"
|
|
label="Choose a country"
|
|
hint="You can only choose one..."
|
|
multiple={false}
|
|
onChange={this.handleSimpleChange}
|
|
source={countriesArray}
|
|
value={this.state.simple}
|
|
/>
|
|
|
|
<Autocomplete
|
|
direction="down"
|
|
label="Type to load new source"
|
|
hint="You can only choose one..."
|
|
multiple={false}
|
|
onChange={this.handleDynamicSimpleChange}
|
|
onInput={this.generateSource}
|
|
onQueryChange={this.handleQueryChange}
|
|
query={this.state.query}
|
|
source={this.state.dynamicSource}
|
|
value={this.state.dynamicSimple}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
return <AutocompleteTest />
|