查找邮政编码轨道的最佳方法是什么?

时间:2015-08-20 23:39:12

标签: jquery ruby-on-rails html5 ruby-on-rails-4 haml

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

我一直试图让这个工作一段时间。基本上我喜欢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');
          }
      });
  });

1 个答案:

答案 0 :(得分:0)

所以对此感兴趣的人都是我做的。

添加现有的课程     ,:input_html => {:id => “first_line”}

first_line ect是jQuery postcode finder建立的id。 这样它会自动放入插件找到的字段。

示例

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