rx.jsx

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterText: '',
      locations: []
    }
  }
  
  updateFilter(e) {
    const filterText = e.target.value;
  
    this.setState({
      filterText,
      locations: []
    });
    
    /*
    this.fetchLocations(filterText)
      .then(locations => {
        this.setState({
          locations
        });
      });
    */
  }
  
  fetchLocations(filterText) {
    console.log(filterText);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve([
          'Alabama',
          'Alaska',
          'Arizona',
          'Arkansas',
          'California',
          'Colorado',
          'Connecticut',
          'Delaware',
          'Florida',
          'Georgia',
          'Hawaii',
          'Idaho',
          'Illinois',
          'Indiana',
          'Iowa',
          'Kansas',
          'Kentucky',
          'Louisiana',
          'Maine',
          'Maryland',
          'Massachusetts',
          'Michigan',
          'Minnesota',
          'Mississippi',
          'Missouri',
          'Montana',
          'Nebraska',
          'Nevada',
          'New Hampshire',
          'New Jersey',
          'New Mexico',
          'New York',
          'North Carolina',
          'North Dakota',
          'Ohio',
          'Oklahoma',
          'Oregon',
          'Pennsylvania',
          'Rhode Island',
          'South Carolina',
          'South Dakota',
          'Tennessee',
          'Texas',
          'Utah',
          'Vermont',
          'Virginia',
          'Washington',
          'West Virginia',
          'Wisconsin',
          'Wyoming'
        ].filter(location => {
          return location.toLowerCase().indexOf(filterText.toLowerCase()) !== -1;
        }))
      }, 1000);
    });
  }
  
  componentDidMount() {
    const source = Rx.Observable
      .fromEvent(document.getElementById('filter'), 'keyup')
      .debounce(200);

    source.subscribe((e) => {
      this.fetchLocations(e.target.value).then(locations => {
        this.setState({
          locations
        });
      });
    });
  }

  render() {
    const { filterText, locations } = this.state;
    const inputProps = {
      id: 'filter',
      value: filterText,
      onChange: this.updateFilter.bind(this)
    }
    
    return (
      <div>
        <input {...inputProps} />
        <ul>
          {locations.map(location => <li>{location}</li>)}
          {locations.length === 0 ? <em>loading...</em>: null}
        </ul>
      </div>
     );
  }
}

React.render(
  <Foo />,
  document.getElementById('app')
);