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:

sorry small mistake, should have returned
{options: options}
this helps me :). i missed the {options: options} in the example
I dont see anything about returning {options: options} but thank you.
In the latest version actually returning options directly works.
This helped me too, thanks :D
Where to set the options variable? it is saying options is undefined.
Most helpful comment
sorry small mistake, should have returned