title: React send AJAX request inside input onChange
body: <p>This is my <strong>SearchForm.js</strong>, on change input <code>keywords</code> I need to send AJAX request with value of this input on other server with, get some values and use them for autocomplete this input. Is it possible at all? How to make it?</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class SearchForm extends React.Component {
      constructor(props) {
        super(props)
  
        this.state = {
         keywords: '',
         city: '',
         date: ''     
        }
  
        //this.handleChange = this.handleChange.bind(this)
        //this.handleSubmit = this.handleSubmit.bind(this)
  
        this.handleKeywordsChange = this.handleKeywordsChange.bind(this);
        this.handleCityChange = this.handleCityChange.bind(this);  
       }
  
      handleKeywordsChange(e) {      
          this.setState({
            keywords: e.target.value
          });
      }
  
      handleCityChange(e) {      
          this.setState({
            city: e.target.value
          });
      }
  
      render() {
          return ( 
              &lt;form className='form search-form' onSubmit={this.handleSubmit}&gt;
                  &lt;div className="form-row"&gt;
                    &lt;div className="form-group col-md-5"&gt;
                      &lt;label htmlFor="keywords"&gt;Keywords&lt;/label&gt;
                      &lt;input type="text" className="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.keywords} /&gt;
  
                    &lt;/div&gt;
  
                    &lt;div className="form-group col-md-5"&gt;
                      &lt;label htmlFor="city"&gt;City&lt;/label&gt;
                      &lt;input type="text" className="form-control" name="city" id="city" placeholder="City" onChange={this.handleCityChange} value={this.state.city} /&gt;
                    &lt;/div&gt;
  
                    &lt;div className="form-group col-md-2"&gt;
                      &lt;label htmlFor="date"&gt;Date&lt;/label&gt;
                      &lt;select className="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.date}&gt;
                        &lt;option&gt;1&lt;/option&gt;
                        &lt;option&gt;2&lt;/option&gt;
                        &lt;option&gt;3&lt;/option&gt;
                        &lt;option&gt;4&lt;/option&gt;
                        &lt;option&gt;5&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                   &lt;/div&gt;
  
                   &lt;div className="form-row"&gt;
                       &lt;div className="form-group col-md-12"&gt;
                          &lt;input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' /&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
              &lt;/form&gt;
          )
      }
  }
  
  export { SearchForm }
  </code></pre>