Created
January 27, 2017 08:28
-
-
Save Razzwan/922e1f28ec0a513a5a3a1ab845e070ce to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
import React from 'react'; | |
import TextField from 'material-ui/TextField'; | |
import Menu from 'material-ui/Menu'; | |
import MenuItem from 'material-ui/MenuItem'; | |
import Autosuggest from 'react-autosuggest'; | |
import { connect } from 'react-redux'; | |
/** | |
* WARNING This file should not be used styles | |
*/ | |
class AutoComplete extends React.Component | |
{ | |
constructor(props) { | |
super(props); | |
this.state = { | |
dataList: [], | |
}; | |
this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this); | |
this.onSuggestionsFetchRequested = this.onSuggestionsFetchRequested.bind(this); | |
this.getSuggestions = this.getSuggestions.bind(this); | |
} | |
getSuggestions({value}) { | |
const self = this; | |
const { list } = this.props; | |
const inputValue = value.trim().toLowerCase(); | |
const inputLength = inputValue.length; | |
return inputLength === 0 ? [] : passengerList.filter(passenger => { | |
return list.toLowerCase().indexOf(inputValue) + 1; | |
}); | |
} | |
onSuggestionsFetchRequested(value) { | |
this.setState({ | |
dataList: this.getSuggestions(value) | |
}); | |
}; | |
onSuggestionsClearRequested() { | |
this.setState({ | |
dataList: [] | |
}); | |
}; | |
render() { | |
const { onNewRequest, index, dispatch, value, error, label, onChange, onBlur, list, ...rest } = this.props; | |
const { dataList } = this.state; | |
const inputProps = { | |
value, | |
onChange: (event, { newValue }) => onChange(...), | |
}; | |
return ( | |
<Autosuggest | |
suggestions={dataList} | |
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} | |
onSuggestionsClearRequested={this.onSuggestionsClearRequested} | |
getSuggestionValue={suggestion => suggestion[name]} | |
onSuggestionSelected={(event, {suggestion}) => { | |
// something | |
}} | |
renderSuggestion={suggestion => ( | |
<MenuItem | |
primaryText={this.getStringFromObject(suggestion)} | |
/> | |
)} | |
inputProps={inputProps} | |
renderInputComponent = {inputProps => { | |
return ( | |
<div> | |
<TextField | |
{...inputProps} | |
errorText={error} | |
floatingLabelText={label} | |
onChange={(event, newValue) => { | |
// example: inputProps.onChange(event, {newValue: newValue}) | |
}} | |
onBlur={() => { | |
// example: | |
// onBlur(passengerNumber, name); | |
// setTimeout(() => this.onSuggestionsClearRequested(), 100); | |
}} | |
/> | |
</div> | |
) | |
}} | |
renderSuggestionsContainer={({children, ...rest}) => ( | |
<Menu {...rest}> | |
{children} | |
</Menu> | |
)} | |
/> | |
); | |
} | |
} | |
function mapStateToAutoCompleteProps (state, props) { | |
return { | |
value: // get value, | |
error: // get error, | |
list: // example: state.list, | |
} | |
} | |
export default connect(mapStateToAutoCompleteProps)(AutoComplete); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi, Razzwan,
I need your favour, I tried using this code but there is some thing i am missing so not able to get the output. Is it possible for you to give me this code in codepen or in jsfiddle with some random data list which is working. It will be really helpful.
my email id is aayushgupta1991@gmail.com
Thanks