查找邮政编码栏的最佳方法？

Question

您好，我正在寻找邮政编码查找方面的帮助（英国）。

我一直试图让它工作一段时间。例如，基本上我喜欢 Ideal Postcode 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" }

Ware first_line 等是 jQuery 邮政编码查找器建立的 id。 这样它就会自动放入插件找到的字段中。

例子

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