查找邮政编码的最好方法

Question

你好，我正在寻找邮政编码查找(英国)的帮助。

我一直在努力让这个工作一段时间。基本上我喜欢理想的邮政编码Jquery方面，例如，但我想让它与我的形式工作。谁能推荐一些东西，将工作为英国地址。

或者建议我如何让这个工作?如将结果保存到类delivery_addres1、2、3等

.col-md-8
  .panel.panel-default
    .panel-heading
      %h3.panel-title Delivery Address:
      %span.pull-right.clickable
        %i.glyphicon.glyphicon-chevron-up
    .panel-body
      %h2 To place a new order we require some additional information please fill that in below:
      = simple_form_for @order do |f|
        = f.input :delivery_name, :label => 'Delivery recipient full name', :required => true
        %p
        = f.input :company_name
        %p 
        = f.input :delivery_address1, :label => 'Address line 1'
        %p
        = f.input :delivery_address2, :label => 'Address line 2'
        %p
        = f.input :delivery_address3, :label => 'Address line 3'
        %p
        = f.input :delivery_city, :label => 'City', :required => true
        %p
        #postcode_lookup_field
        :javascript
          $('#postcode_lookup_field').setupPostcodeLookup({
              // Set your API key
              api_key: 'apikey',
              // Pass in CSS selectors pointing to your input fields to pipe the results
              output_fields: {
                  delivery_address1: '#first_line',
                  delivery_address2: '#second_line',
                  delivery_address3: '#third_line',
                  delivery_city: '#post_town',
                  delivery_postcode: '#postcode'
              }
          });
        %p
        = f.input :delivery_postcode, :label => 'postcode', :required => true
        %p
        = f.input :phone, :label => 'Contact/phone number', :required => true, :limit => 12
        %p
        = f.input :description_content, :label => 'Description of contents.'
        %br
        = f.input :restricted_items, :label => 'I have read and agree to the restricted item list.', :required => true, :input_html => { :checked => true }
        %br
        = f.input :terms_conditions, :label => 'I agree to the T&C.', :class => 'checkbox', :required => true, :input_html => { :checked => true }
        %br
        = f.input :insurance, :label => 'If in need of insurance tick this box'
        %br
        = f.input :contents_value, :label => 'Estimated value', :limit => 12, :hint => "Should be in Pounds."
        %p
        / = f.input :cf_reference, :label => 'Consignment reference', :hint => 'This will be automatically entered'
        %p
        = f.input :service, :label => 'Service Level', :required => true, :as => :select, :collection => [['DMS Express', 'DMS Express'], ['DMS 10.00', 'DMS 10.00'], ['DMS 12.00', 'DMS 12.00'], ['DMS Saturday & Sunday', 'DMS Saturday & Sunday']]
        %p
        = f.input :reference_number
        %p
        = f.button :submit, :class => 'btn-primary'
:css
  .panel-heading span {
      margin-top: -20px;
      font-size: 15px;
  }
  .row {
      margin-top: 40px;
      padding: 0 10px;
  }
  .clickable {
      cursor: pointer;
  }
:javascript
  jQuery(function ($) {
      $('.panel-heading span.clickable').on("click", function (e) {
          if ($(this).hasClass('panel-collapsed')) {
              // expand the panel
              $(this).parents('.panel').find('.panel-body').slideDown();
              $(this).removeClass('panel-collapsed');
              $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
          }
          else {
              // collapse the panel
              $(this).parents('.panel').find('.panel-body').slideUp();
              $(this).addClass('panel-collapsed');
              $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
          }
      });
  });

Answer 1

有兴趣的人来看看我是怎么做的。

添加到您现有的类，:input_html => {:id => "first_line"}

Were first_line ect是由jQuery邮编查找器建立的id。这样，它会自动输入插件找到的字段。

例子

%p 
= f.input :delivery_address1, :input_html => { :id => "first_line" }, :label => 'Address line 1'