为什么 jquery 自动完成在 https（安全页面）上不起作用？答案

【问题标题】：why jquery autocomplete doesnt work on https (secure pages)?为什么 jquery 自动完成在 https（安全页面）上不起作用？
【发布时间】：2014-08-09 04:17:17
【问题描述】：

我正在尝试让 jquery 自动完成功能在 https（安全页面）页面上工作，但它没有显示任何下拉菜单。我搜索了这个问题，发现它的安全问题。

谁能告诉我如何在 https 页面上打开这个自动完成下拉菜单。

这是我的 jquery 自动完成代码：

function zipAutoCompletet(prefix) {
  jQuery("#" + prefix + "_zip").autocomplete({
    source: function (request, response) {
      jQuery.ajax({
        url: "http://ws.geonames.org/postalCodeSearchJSON",
        dataType: "jsonp",
        data: {
          style: "full",
          maxRows: 12,
          postalcode_startsWith: request.term
        },
        success: function (data) {
          response(jQuery.map(data.postalCodes, function (item) {
            return {
              label: item.placeName + (item.adminCode1 ? ", " + item.adminCode1 : "") + ", " + item.postalCode + ", " + item.countryCode,
              value: item.postalCode
            }
          }));
          jQuery('.ui-autocomplete').css('width', '188px');
        }
      });
    },
    minLength: 2,
    select: function (event, ui) {
      var myString = new String(ui.item.label);
      var address = myString.split(',')
          jQuery('#' + prefix + '_city').val(address[0]);
      jQuery('#' + prefix + '_city').addClass('activated');
      jQuery('#' + prefix + '_city').trigger('change');
      jQuery('#' + prefix + '_city').parents('.row').removeClass('error-row')
        jQuery('#' + prefix + '_city').parents('.row').addClass('ok-row')
          var countryCode = address[3] ? address[3] : address[2]
              countryCode = jQuery.trim(countryCode);
      var countryName = jQuery('#' + prefix + '_country option[value="' + jQuery.trim(countryCode) + '"]').text()
          jQuery('#countryContainer .jqTransformSelectWrapper span').html(countryName)
            jQuery('#countryContainer .jqTransformSelectWrapper').addClass('selected-jqtranform');
      jQuery('#' + prefix + '_country').parents('.row').addClass('ok-row')
        jQuery('#' + prefix + '_country').parents('.row').removeClass('error-row')
          jQuery('#' + prefix + '_country').val(jQuery.trim(countryCode))
            var stateCode = address[2] ? address[1] : '';
      stateCode = jQuery.trim(stateCode)
        if (countryCode == 'US') {
          var base = base_url;
          base = base.replace("https", "http");
          jQuery.ajax({
            url: base + "/getStateName",
            dataType: "jsonp",
            data: {
              stateCode: stateCode
            },
            success: function (data) {
              stateName = data
                jQuery('#jc_state').val(stateName);
              jQuery('#jc_state').addClass('activated');
              jQuery('#jc_state').parents('.row').removeClass('error-row')
                jQuery('#jc_state').parents('.row').addClass('ok-row')
                  jQuery('#jc_state').trigger('change');
              formValidate();
            }
          });
        } else {
          stateName = stateCode
            jQuery('#jc_state').val(stateName);
          jQuery('#jc_state').addClass('activated');
          jQuery('#jc_state').parents('.row').removeClass('error-row')
            jQuery('#jc_state').parents('.row').addClass('ok-row')
              jQuery('#jc_state').trigger('change');
          formValidate();
        }
      jQuery('#' + prefix + '_zip').parents('.row').addClass('ok-row')
        jQuery('#' + prefix + '_zip').parents('.row').removeClass('error-row');
    },
    open: function () {
      jQuery(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
      jQuery(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    },
    change: function (event, ui) {
      if (ui.item === null) {
        jQuery("#" + prefix + "_zip").parents('.row').removeClass('ok-row');
        jQuery("#" + prefix + "_zip").parents('.row').addClass('error-row');
        $("#" + prefix + "_zip").val('');
      }
    }
  });
}

我将上述代码用于邮政编码字段。此代码在非 https 页面上运行良好，但当我在 https 页面上尝试时它不显示。

欢迎任何解决方案。

【问题讨论】：

你检查过同源政策条件
同源条件策略是什么意思？
你的页面的域名是什么？同源策略禁止浏览器向与页面域不同的域发送 ajax 请求。在您的情况下，发送 ajax 请求的页面必须来自 ws.geonames.org 域。 en.wikipedia.org/wiki/Same_origin_policy在这个页面可以看Origin determination rules
只是补充一点@ArunPJohny 所说的，您的浏览器禁止跨不同域发送ajax 请求，但是您可能有兴趣使用jsonp 来完成此操作。 JSONP（或带填充的 json）允许跨不同域的通信。
感谢@ArunPJohny，但有什么方法可以完成这项任务吗？

标签： jquery-ui ssl autocomplete https

【解决方案1】：

当我查看他们支持 jsonp 的服务提供商时，以下示例有效

$("input").autocomplete({
    source: function (request, response) {
        $.getJSON("http://ws.geonames.org/postalCodeSearchJSON?callback=?", 
          { 'postalcode_startsWith': request.term, maxRows: 12, style: "full" }, 
          function(data) {
              if(data.postalCodes){
                  var x = $.map(data.postalCodes, function(v, i){
                      console.log(v)
                      return {
                          label: v.placeName + ' - ' + v.postalCode, 
                          v: v.postalCode
                      }
                  });
                  response(x);
              }
          }
        );        
    }
});

演示：Fiddle

【讨论】：