Adding a new method to GoogleAutoComplete.js to autofill input
See original GitHub issueAfter studying how the functions/methods were defined in GoogleAutoComplete.js
:
_this._clearSearchs = function () {
if (_this._isMounted) {
_this.setState({
locationResults: [],
});
}
};
I attempted to write one to get the text input inside <GoogleAutoComplete>
to autocomplete when one of the search results was selected:
Customised LocationItem.js
to only render the <View>
component child:
class LocationItem extends PureComponent {
render () {
return (
<View style={styles.root}>
<Text>{this.props.description}</Text>
</View>
);
}
}
Moved <TouchableOpacity>
to the locationResults.map
in the App.js
instead to call the handleTextAutoFill
nested inside <GoogleAutoComplete>
<GoogleAutoComplete apiKey={'API_KEY'}>
{({handleTextChange, locationResults, clearSearchs, handleTextAutoFill}) => (
<React.Fragment>
<View style={{marginTop: 80}}>
<TextInput
style={{height: 40, paddingHorizontal: 10, marginHorizontal: 20}}
placeholder={'Search a place'}
onChangeText={handleTextChange}
/>
</View>
<ScrollView>
{locationResults.map(el => (
<TouchableOpacity onPress={() => handleTextAutoFill(el.description)} >
<LocationItem
{...el}
key={el.id}
/>
</TouchableOpacity>
))}
</ScrollView>
</React.Fragment>
)}
</GoogleAutoComplete>
The handleTextAutoFill
function written inside of GoogleAutoComplete.js
, inserted after the _this._handleTextChange
:
//after selection has been made, the list of search results will be emptied
_this._handleTextAutoFill = function (selectedResult){
_this.setState({
textInput: selectedResult,
locationResults: [],
});
};
However when I select a result nothing happens.
I’m not very familiar with the ReactJS syntax so I think my onPress={() => handleTextAutoFill(el.description)}
is incorrect.
Issue Analytics
- State:
- Created 5 years ago
- Comments:17 (7 by maintainers)
Top Results From Across the Web
Place Autocomplete | Maps JavaScript API - Google Developers
Autocomplete adds a text input field to your web page, and monitors that field for character entries. As the user enters text, autocomplete...
Read more >How can I add google autocomplete at multiple input box on ...
I have found a code for autocomplete address on google side.. where they only link with one input box. But I want to...
Read more >How to use Place Autocomplete to auto-fill forms - YouTube
Turn your address form input field into an address autocomplete bar. Place Autocomplete can help you provide a better checkout experience ...
Read more >Autocomplete Field on Google Web App - YouTube
In this video, I demonstrate how to use the JQuery Autocomplete Field within a Bootstrap Form on Google Web App. Video, Code, ...
Read more >Add Google Places Autocomplete To An Input Field - YouTube
By the end of this video, you'll be able to enable/ add Google Places Autocomplete functionality to an input field that will show...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Alright, after thinking about it long and hard, the solution I came up with involves customising a
<TextInput/>
so that you can parse both parent and superparent.setState()
functions into it via custom props.====== Usage:
This issue wasn’t really related to your repo, but I appreciate the help anyways.
Ok so I make it work. This can’t be a feature cause I want it to be flexible so this is something really easy to add. Took me like 5 lines.
First if we follow my example I will do this
And for the locationItem