import React, {Component} from 'react';

import Autocomplete from 'react-autocomplete-select'

class Example extends Component {

 inputRef = React.createRef();

 state = {
   changedValue : ''
 }

 componentDidMount(){

   this.inputRef.current.focus();
 }

 componentDidUpdate(){
   // get input field value
   // console.log(this.inputRef.current.value);
 }


 render() {    
   return <div>
     <h3>Autocomplete Demo</h3>
    
       <Autocomplete 

         ref={this.inputRef} // input field's ref prop
         
         searchPattern={'containsString'} // possible values are
         // ['containsString','containsLetter','startsWith','endsWith']
         
         selectOnBlur = {false}    // whether active dropdown option should 
         // select or not when input field is blured
         
         placeholder = "Type to Search" // input field's placeholder
         
         maxOptionsLimit = {10} // max options to show in dropdown
         
         searchEnabled = {true} /** if axiosConfig prop is passed 
         //then itemsData prop is ignored. 
         // And shows the data as returned by the axios request 
         // and does not make the search on the response data of axios request.
         // If you want to enable search on the axios response data 
         // then set searchEnabled = {true}
         **/
         
         getItemValue={(item)=>{ return item.name }} /** get the value from 
         // every element of array passed object 
         // e.g if data to make search on is this 
         // [{country: 'USA'},{country: 'UK'}] 
         // then you will set this props just like this 
         // getItemValue={(item)=>{ return item.country }}
         **/
       
       
       optionsJSX = { (value)=><span>value</span>} // // custom option JSX ...
       // you can enclose the passed value in any valid jsx tags... 
       
         onChange = {
                       changedValue=>{ 
                       this.setState({ changedValue: changedValue }); 
                   }} // called every time the input values get changes
                   
         onSelect = {
                       selectedValue => { 
                       console.log(' so here comes 
                       the selected vlaue ......',selectedValue)
                       }} // called when an option is selected
                       
         axiosConfig = {(inputFieldValue) => ({
           url : 'http://local.cuddlynest.com/autocomplete.php?
           query=${inputFieldValue}',
           method : 'get' // default,
           responseType : 'JSON' // enable this option otherwise will not 
                                   // work properly and response from the 
                                   // server should return the data 
                                   // in json format
           
         }) } // you could pass any of the axios config ... 
              // check axios config docs on this url
              // https://github.com/axios/axios#request-config
              
          
         itemsData = {[ 
                       {
                         "country": "United State"
                       },
                       {
                         "country": "United Kingdom"
                       },
                       {
                       },
                         "country": "Canada"
                       {
                         "country": "Australia"
                       },
                       {
                         "country": "New Zealand"
                       }
                     ]}
       />
   </div>
 }
}