React send AJAX request inside input onChange

Question

This is my SearchForm.js, on change input keywords 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?

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 ( 
            <form className='form search-form' onSubmit={this.handleSubmit}>
                <div className="form-row">
                  <div className="form-group col-md-5">
                    <label htmlFor="keywords">Keywords</label>
                    <input type="text" className="form-control" name="keywords" id="keywords" placeholder="Keywords" onChange={this.handleKeywordsChange} value={this.state.keywords} />

                  </div>

                  <div className="form-group col-md-5">
                    <label htmlFor="city">City</label>
                    <input type="text" className="form-control" name="city" id="city" placeholder="City" onChange={this.handleCityChange} value={this.state.city} />
                  </div>

                  <div className="form-group col-md-2">
                    <label htmlFor="date">Date</label>
                    <select className="form-control" name="date" id="date" onChange={this.handleChange} value={this.state.date}>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                 </div>

                 <div className="form-row">
                     <div className="form-group col-md-12">
                        <input id='formButton' className='btn btn-primary' type='submit' placeholder='Send' />
                    </div>
                 </div>
            </form>
        )
    }
}

export { SearchForm }

Answer 1

use axios api to call api and fetch data

onKeyUp(e) {
  axios.get('/seachdata?keywords='+e.target.value)
  .then(function (response) {
     this.setState({autosearchresponse: response.data})
  })
  .catch(function (error) {
    console.log(error);
  });
}

search data set in this.state.autosearchresponse you can use autosearch response as html

 {this.state.autosearchresponse.map((value, i)=>
  <div key={i}>{value}</div>    
)}

bind onKeyUp function to input