import * as Autosuggest from 'react-autosuggest' ; import * as React from 'react' ; import * as ReactDom from 'react-dom' ; import { Utils , PathRegion , Helpable } from './Utils' ; const getSuggestionValue = suggestion => suggestion ; const renderSuggestion = suggestion => < div > { suggestion } < /div>; interface AutoCompleteProps { reference : string ; value : string ; onChange : any ; placeholder : string ; title ? : string ; width ? : number ; } interface AutoCompleteState { suggestions : string [ ] ; } class AutoComplete extends React . Component < AutoCompleteProps , AutoCompleteState > { constructor ( props ) { super ( props ) ; this . state = { suggestions : [ ] } ; } _getSuggestions ( value ) { const _this = this ; if ( value . length >= 2 && value . lastIndexOf ( 'ch' , 0 ) !== 0 ) { fetch ( '/api/v2/feature?ref=' + this . props . reference + '&startsWith=' + value . toUpperCase ( ) ) . then ( function ( response ) { return response . json ( ) ; } ) . then ( function ( json ) { _this . setState ( { suggestions : json } ) ; } ) . catch ( function ( err ) { console . error ( err ) ; } ) ; } } onSuggestionsFetchRequested = ( { value } ) => { this . _getSuggestions ( value ) ; } ; onSuggestionsClearRequested = ( ) => { this . setState ( { suggestions : [ ] } ) ; } ; render ( ) { const value = this . props . value ; const suggestions = this . state . suggestions ; const inputProps = { placeholder : this . props . placeholder , value , onChange : this . props . onChange , style : { width : this . props . width } } ; return ( < Autosuggest suggestions = { suggestions } onSuggestionsFetchRequested = { this . onSuggestionsFetchRequested } onSuggestionsClearRequested = { this . onSuggestionsClearRequested } getSuggestionValue = { getSuggestionValue } renderSuggestion = { renderSuggestion } inputProps = { inputProps } / > ) ; } } export default AutoComplete ;