为什么HTTPS（安全网页）jQuery的自动完成功能不工作？ [英] why jquery autocomplete doesnt work on https (secure pages)?

问题描述

我试图让jQuery的自动完成要上HTTPS（安全网页）的网页，但它不是表现出任何下拉的工作。
我搜索了这个问题，并发现它的安全问题。

I am trying to make jquery autocomplete to be work on https (secured pages) pages but its not showing any dropdown. I searched on this issue and found that its security issue.

任何一个可以告诉我怎么打开的HTTPS网页自动完成这个下拉菜单。

can any one tell me how to turn on this autocomplete dropdown on https pages.

这是我的code到jQuery的自动完成：

here is my code to jquery autocomplete :

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('');
      }
    }
  });
}

我使用上述code对于ZIP code field.This code对非HTTPS网页能正常工作，它工作正常，但是当我以https网页试过它不显示。

I am using above code for zipcode field.This code works fine on non-https pages it works fine but when I tried it with https pages it doesnt shows.

任何解决方案是值得欢迎的。

any solutions are welcome.

推荐答案

当我看着他们支持 JSONP 和下面的示例工作

As I looked into the service provider they are supporting jsonp and the following sample worked

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

演示：小提琴

这篇关于为什么HTTPS（安全网页）jQuery的自动完成功能不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！