content: import React from 'react';
  import Select from 'react-select';
  
  var RemoteSelectField = React.createClass({
  	displayName: 'RemoteSelectField',
  	propTypes: {
  		hint: React.PropTypes.string,
  		label: React.PropTypes.string,
  	},
  	loadOptions (input, callback) {
  		input = input.toLowerCase();
  		var rtn = {
  			options: [
  				{ label: 'One', value: 'one' },
  				{ label: 'Two', value: 'two' },
  				{ label: 'Three', value: 'three' }
  			],
  			complete: true
  		};
  		if (input.slice(0, 1) === 'a') {
  			if (input.slice(0, 2) === 'ab') {
  				rtn = {
  					options: [
  						{ label: 'AB', value: 'ab' },
  						{ label: 'ABC', value: 'abc' },
  						{ label: 'ABCD', value: 'abcd' }
  					],
  					complete: true
  				};
  			} else {
  				rtn = {
  					options: [
  						{ label: 'A', value: 'a' },
  						{ label: 'AA', value: 'aa' },
  						{ label: 'AB', value: 'ab' }
  					],
  					complete: false
  				};
  			}
  		} else if (!input.length) {
  			rtn.complete = false;
  		}
  
  		setTimeout(function() {
  			callback(null, rtn);
  		}, 500);
  	},
  	renderHint () {
  		if (!this.props.hint) return null;
  		return (
  			<div className="hint">{this.props.hint}</div>
  		);
  	},
  	render () {
  		return (
  			<div className="section">
  				<h3 className="section-heading">{this.props.label}</h3>
  				<Select asyncOptions={this.loadOptions} className="remote-example" />
  				{this.renderHint()}
  			</div>
  		);
  	}
  });
  
  module.exports = RemoteSelectField;
  