{"id":866,"date":"2020-03-25T14:32:33","date_gmt":"2020-03-25T14:32:33","guid":{"rendered":"http:\/\/www.andreagirardi.it\/blog\/?p=866"},"modified":"2020-03-26T12:00:22","modified_gmt":"2020-03-26T12:00:22","slug":"fill-options-of-autocomplete-with-api-results","status":"publish","type":"post","link":"https:\/\/www.andreagirardi.it\/blog\/fill-options-of-autocomplete-with-api-results\/","title":{"rendered":"React.js: fill options of Autocomplete with API results"},"content":{"rendered":"\n

The autocomplete is a normal text input enhanced by a panel of suggested options.  Autocomplete is a feature that helps in predicting the rest of the word typed by a user. Autocomplete is helpful from the user as well as the user experience perspective. It makes users happy by saving their time and also by offering them several choices.<\/p>\n\n\n\n

In this case, I fill the Autocomplete with the results of Google Ads locations an this is the expected result:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For first, import Autocomplete component (of course must be installed):<\/p>\n\n\n\n

import Autocomplete from '@material-ui\/lab\/Autocomplete';\n\/\/ or\nimport { Autocomplete } from '@material-ui\/lab';<\/code><\/pre>\n\n\n\n
Define the object that will be used to collect the Autocomplete options:<\/p>\n\n\n\n
const locationResults = [];<\/code><\/pre>\n\n\n\n
This is how Autocomplete is defined:<\/p>\n\n\n\n
let autocompleteBox = <Grid item xs={12} md={12} sm={12} lg={12}>\n    <Autocomplete\n        id=\"autocompleteLocations\"\n        value={this.state.autocompleteValue}\n        options={locationResults} \n        getOptionLabel={option => option.locationName}      \n        autoHighlight={true}   \n        autoSelect={true}                    \n        style={{ width: 600, marginTop: 20 }}                        \n        clearOnEscape                        \n        onChange={(event, autocompleteValue) => this.setState({ autocompleteValue })}\n        renderInput={params => <TextField {...params} label=\"Search location\" variant=\"outlined\" onChange={this.handleAutocompleteTextChange.bind(this)} \/>}\n    \/>\n\n    <\/Grid>;<\/code><\/pre>\n\n\n\n
Once the user enters some text on Search location TextField, this function is called (I expect user inserts at least 3 chars before call the API):<\/p>\n\n\n\n
\/**\n * On change text of Autocomplete\n *\/\nhandleAutocompleteTextChange = (event) => {\n\n    this.setState({\n        query: event.target.value\n    }, () => {\n\n        if (this.state.query && this.state.query.length > 3) {\n            this.getLocations(this.state.query);\n        }\n    })\n}<\/code><\/pre>\n\n\n\n
This is how the function getLocations() is implemented:<\/p>\n\n\n\n
\/*\n * API Function to retrieve locations\n *\/\ngetLocations = (locationQuery) => {\n\n    axios(\n        {\n            method : 'get', url: GET_LOCATIONS, auth: this.state.userInfo.apiAuth, params: {\n            user: this.state.userInfo.username,\n            customerId: this.state.clientCustomerId,\n            query: locationQuery\n        }\n    }).then(res => {\n\n        if (res.status == 200) {\n            this.setState({results: res},()=>{\n                this.forceReloadOrganization(res)\n            });\n        } else {\n            this.setState({results: []});\n        }\n\n    }).catch(error => {\n        this.setState({results: []});\n        console.log(JSON.stringify(error));\n    });\n\n}<\/code><\/pre>\n\n\n\n
The last thing is to update the options on Autocomplete:<\/p>\n\n\n\n
\/**\n * Reload the results after API call\n *\/\nforceReloadOrganization = (results) => {\n    {\n\n        if ( results.data != \"\" ) {\n            results.data.map(item => {\n\n                locationResults.push({\n                        id:item.location.id,\n                        type: item.location.displayType,\n                        locationName:item.canonicalName + \": \" + item.location.displayType + \" (\" + item.location.id + \")\"\n                    }\n                )\n            });\n        }\n\n    }\n}<\/code><\/pre>\n
Share this:<\/h3>