/** @jsx React.DOM */
var AutoComplete = React.createClass({
  getInitialState: function() {
    return {
      allItems: [
        'Ronald',
        'Bob',
        'Derek',
        'Anthony',
        'Satheesh',
        'Nicole',
        'Taro',
        'Perk',
        'Ben',
        'Zeus'
      ],
      items: []
    }
  },
  filterItems: function(event) {
    var list = this.state.allItems;
    list = list.filter(function(item) {
      return item.toLowerCase().indexOf(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({
      items: list
    });
  },
  componentWillMount: function() {
    this.setState({
      items: this.state.allItems
    })
  },
  render: function() {
    return ( <div className="dropdown">
      <input type="text"
      onChange = {
        this.filterItems
      }
      /> <Dropdown items = {
        this.state.items
      }
      /> </div>
    );
  }
});

var Dropdown = React.createClass({
  render: function() {
    return ( <ul> {
      this.props.items.map(function(item) {
          return <li> {
            item
          } </li>
        })
      } </ul>
    );
  }
});

React.renderComponent( <AutoComplete /> , document.getElementById('Search'));