<!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')
)