Add Amadeus airport and city search autocomplete to Rails app

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");
    }
  });
});