Add Amadeus airport and city search autocomplete to Rails app - ruby-on-rails

Question

What is the best way to send a request to the Amadeus API with a form field that uses autocomplete in a Rails app?
I am adding autocomplete to a search form to query the Amadeus "Airport and City Search".
I am using Rails 6 and gem 'amadeus'.
I get a 401 Unauthorized error when I type 3 letters into the search form. How can I authorize my request and make this autocomplete work?
Here is my javascript:
$(function() {
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
$("#city").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://test.api.amadeus.com/v1/reference-data/locations",
dataType: "json",
data: {
apikey: "my_api_key_here",
keyword: request.term
},
success: function(data) {
response(data);
}
});
},
minLength: 3,
select: function(event, ui) {
log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});

Answer 1

Here is an authorized request with javascript using the gon gem to get the access token in javascript.
$(function() {
amadeus_client = gon.amadeus
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
console.log("Requesting Token...");
var settings = {
"url": "https://test.api.amadeus.com/v1/security/oauth2/token",
"method": "POST",
"timeout": 0,
"data": {
"client_id": amadeus_client.client_id,
"client_secret": amadeus_client.client_secret,
"grant_type": "client_credentials"
}
};
$.ajax(settings).done(function (response) {
console.log("Assigning Token variables...");
ACCESS_TOKEN = response.access_token;
console.log("Access Token : " + ACCESS_TOKEN);
});
$("#city").autocomplete({
source: function(request, response) {
$.ajax({
type: "get",
url: "https://test.api.amadeus.com/v1/reference-data/locations",
dataType: "json",
beforeSend: function(xhr) {
xhr.setRequestHeader('Authorization',
'Bearer ' + ACCESS_TOKEN);
},
data: {
keyword: request.term,
subType: "CITY"
},
success: function(data){
// console.log(data);
response($.map(data.data, function(el){
return {
label: el.detailedName,
value: el.iataCode
}
}));
}
});
},
minLength: 3,
select: function(event, ui) {
log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});