@ftrack/react-toolbox/docs/app/components/layout/main/modules/examples/autocomplete_example_1.txt

A set of React components implementing Google's Material Design specification with the power of CSS Modules.

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']
  };

  handleSimpleChange = (value) => {
    this.setState({simple: value});
  };

  handleMultipleChange = (value) => {
    this.setState({multiple: value});
  };

  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}
        />
      </div>
    );
  }
}

return <AutocompleteTest />