const INPUT_TIMEOUT = 250;
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
predictions: [],
};
this.onChange = this.onChange.bind(this);
}
getPredictions(value) {
return [
'Boston',
'Los Angeles',
'San Diego',
'San Franciso',
'Sacramento',
'New York',
'New Jersie',
'Chicago',
].filter(item => item.toLowerCase().indexOf(value.toLowerCase()) !== -1);
}
onChange(e) {
clearTimeout(this.timeout);
const value = e.target.value;
this.setState({
value
});
if (value.length > 0) {
this.timeout = setTimeout(() => {
const predictions = this.getPredictions(value);
this.setState({
predictions
});
}, INPUT_TIMEOUT);
} else {
this.setState({
predictions: []
});
}
}
render() {
return (
<div >
<input type = "text" value={this.state.value} onChange = {this.onChange}/>
<div>
{
this.state.predictions.map((item, index) => (
<div key={index + item}>{item}</div>
))
}
</div>
</div>
)
}
}
ReactDOM.render( <TodoApp />, document.querySelector("#app"))