<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
    <script src="https://npmcdn.com/classnames/index.js"></script>
    <script src="https://npmcdn.com/react-input-autosize/dist/react-input-autosize.js"></script>
    <script src="https://npmcdn.com/react-select/dist/react-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
    <link rel="stylesheet" href="https://npmcdn.com/react-select/dist/react-select.css">
  </head>

  <body>
    <div class="select-demo">
    	<div id="app"></div>
    </div>
    <script src="script.js"></script>
  </body>

</html>
// Demo data source
const dataSrc = [
	{ value: 'red', label: 'Red' },
	{ value: 'green', label: 'Green' },
	{ value: 'blue', label: 'Blue' },
	{ value: 'yellow', label: 'Yellow' },
	{ value: 'cyan', label: 'Cyan' },
	{ value: 'magenta', label: 'Magenta' }
]

// Simulate loading some data and filtering by user input
const loadOptions = (input, cb) => {
  const delay = 200
  setTimeout(() => {
    const results = dataSrc.filter(o => _.startsWith(o.value, input.toLowerCase()))
    cb(null, { options: results })
  }, delay)
}

class AsyncCreatable extends React.Component {
  render () {
    return (
      <Select.Async {...this.props}>
        {(asyncProps) => (
          <Select.Creatable {...this.props}>
            {(creatableProps) => (
              <Select
                {...asyncProps}
                {...creatableProps}
                filterOptions={creatableProps.filterOptions}
                onInputChange={(input) => {
                  creatableProps.onInputChange(input)
                  return asyncProps.onInputChange(input)
                }}
                ref={(ref) => {
									creatableProps.ref(ref);
									asyncProps.ref(ref);
								}}
							/>
						)}
          </Select.Creatable>
				)}
      </Select.Async>
    )
  }
}

class SelectDemo extends React.Component {

  constructor (props) {
    super(props)

    this.state = {
      value: undefined
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange (value) {
    this.setState({ value })
  }

  render () {
    return (
      <div>
        <AsyncCreatable
          name='select-async-creatable'
          loadOptions={loadOptions}
          value={this.state.value}
          onChange={this.handleChange}
  				// use filter
          filterOptions={(i) => i}
  			/>
			</div>
    )
  }
}

ReactDOM.render(
  <SelectDemo />,
	document.getElementById('app')
)