Following the github users example, I have the following getCodes function in my loadOptions. The options returned within the promise are valid post the fetch call. However, the issue is that the dropdown menu doesn't show those options and just says 'Type to search'.
getCodes(input) {
if (!input) {
return Promise.resolve({
options: [
{label: 'Delhi', value: 'DEL'},
{label: 'Mumbai', value: 'MUM'}
]
});
}
const url = 'http://iatacodes.org/api/v6/autocomplete?query=' + input + '&api_key=' + KEY;
var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
return fetch(proxyUrl+url)
.then((response) => {
return response.json();
}).then((json) => {
var options = [];
_.each(json['response']['airports'], (airport) => {
options.push({
label: airport['name'],
value: airport['code']
})
});
console.log(options);
return options;
});
}
fromLocChange(o) {
this.setState({...this.state, fromLoc: o.value});
}
<Select.Async
name="form-field-name"
className="selector"
valueKey="value"
labelKey="name"
value={this.state.fromLoc}
onChange={this.fromLocChange}
clearable={false}
loadOptions={this.getCodes}
/>
Output of the console.log above for a search term 'JAI' is:
[
{label: "Sanganeer", value: "JAI"},
{label: "Jaisalmer", value: "JSA"}
]
Screenshot of the selector: