Amadeus Airport使用jQuery自动完成_Jquery_Json_Autocomplete_Amadeus

Amadeus Airport使用jQuery自动完成

jquery json autocomplete

Amadeus Airport使用jQuery自动完成,jquery,json,autocomplete,amadeus,Jquery,Json,Autocomplete,Amadeus,问题： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <

问题：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <style>
    #city {
      width: 25em;
    }
  </style>
  <script>
    $(function() {
      function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
      }
      $("#city").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "http://api.sandbox.amadeus.com/v1.2/airports/autocomplete",
            dataType: "json",
            data: {
              apikey: "SECRET",
              term: 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");
        }
      });
    });
  </script>
</head>

<body>
  <div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city">
  </div>
  <div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  </div>
</body>

</html>

正在尝试使自动完成功能与Amadeus Airport autocomplete配合使用，可在此处找到：

最小示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <style>
    #city {
      width: 25em;
    }
  </style>
  <script>
    $(function() {
      function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
      }
      $("#city").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "http://api.sandbox.amadeus.com/v1.2/airports/autocomplete",
            dataType: "json",
            data: {
              apikey: "SECRET",
              term: 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");
        }
      });
    });
  </script>
</head>

<body>
  <div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city">
  </div>
  <div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  </div>
</body>

</html>


jQueryUI自动完成
#城市{
宽度：25em；
}
$（函数（）{
功能日志（消息）{
$（“”）.text（message）.prependTo（“#log”）；
$（“#log”）.scrollTop（0）；
}
$（“#城市”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“http://api.sandbox.amadeus.com/v1.2/airports/autocomplete",
数据类型：“json”，
数据：{
阿皮奇：“秘密”，
期限：request.term
},
成功：功能（数据）{
答复（数据）；
}
});
},
最小长度：3，
选择：功能（事件、用户界面）{
日志（ui.item？
“选定：”+ui.item.label：
“未选择任何内容，输入为”+此值）；
},
打开：函数（）{
$（this）.removeClass（“ui角点全部”）.addClass（“ui角点顶部”）；
},
关闭：函数（）{
$（this.removeClass（“ui角顶部”）.addClass（“ui角全部”）；
}
});
});
您所在的城市：
结果:

所需输出：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <style>
    #city {
      width: 25em;
    }
  </style>
  <script>
    $(function() {
      function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
      }
      $("#city").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "http://api.sandbox.amadeus.com/v1.2/airports/autocomplete",
            dataType: "json",
            data: {
              apikey: "SECRET",
              term: 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");
        }
      });
    });
  </script>
</head>

<body>
  <div class="ui-widget">
    <label for="city">Your city: </label>
    <input id="city">
  </div>
  <div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
  </div>
</body>

</html>

在键入时获取列表中的机场列表。如果有人能指出我错过了什么，我将不胜感激。

事实证明答案很简单。Safari 9.0似乎正在阻止“不安全内容”，我所要做的就是将http://更改为https://以使其正常工作