jQuery geocomplete street_address 不工作

Question

我今天一直在努力尝试从 jQuery Geocomplete 中获取字段结果以显示 street_address 但看起来插件没有将其作为 data-geo="" 呈现到我的表单字段或其他任何地方！。

在我的 HTML 上咆哮，我有字段可以选择 街道名称 和另一个号码我需要两者的结果都转到 #BillingAddress。我相信一些 JavaScript 可能会做这项工作，但我不是这方面的专家。

<div class="item">
<input id="autocomplete" placeholder="Look up your address" type="text"></input>
</div>
<div class="item" style="display: none;">
<input class="cat_textbox" id="houseNo" data-geo="street_number" type="text" placeholder="House Number" maxlength="50"/>
</div>
<div class="item" style="display: none;">
<input class="cat_textbox" id="street" data-geo="route" type="text" placeholder="street" maxlength="50"/>
</div>
<div class="item">
<input class="cat_textbox" id="BillingAddress" data-geo="street_address" type="text" placeholder="Billing Address" maxlength="50" name="BillingAddress"/>
</div>

到目前为止，我已经尝试使用一些 jquery 将字段值传输到 #BillingAddress 输入，但它仅在其他输入被键入或按下时才复制， clicked, but I want them to keep hidden to improve visibility and make the form less complex for some people, so when the Geo results is chosen they populate into this field together.

$('#houseNo').on('propertychange change click keyup input paste',function(){
   $('#BillingAddress').val(this.value+' '+$('#street').val());
});

$('#street').on('propertychange change click keyup input paste', function(){
   $('#BillingAddress').val($('#houseNo').val()+' '+this.value);
});

非常感谢您的帮助，我认为这对其他人来说也是一个很好的查询。

HERE IS THE FIDDLE

Answer 1

填充细节：函数（结果）{ "result" 对象在 "address_components" 中没有 "street_address"，它被设置为单独的属性结果 - "name"。如果您只是输入搜索词并提交，将返回 "name"。如果您再次单击 "find"，则不会返回 "name"。

我快速 "fix" 替换了 "street_address"，在第 338 行我添加了以下内容：

    street_addr: result.formatted_address.split(',')[0],

所以第 335-339 行看起来像这样：

  // Add infos about the address and geometry.
  $.extend(data, {
    formatted_address: result.formatted_address,
    street_addr: result.formatted_address.split(',')[0],
    location_type: geometry.location_type || "PLACES",

并在第 65 行添加了 "street_addr"：

"formatted_address street_addr location_type bounds").split(" ");

Answer 2

您可能已经知道，修改插件并不是一件好事。有一种更简单的方法来连接结果对象的元素。只需绑定到结果。

$('#geocomplete').geocomplete({
  details: '#geo_details',
  detailsAttribute: 'data-geo',
  types: ['geocode', 'establishment']
}).bind("geocode:result", function(e, r) {
  return $('[data-geo=street_address]').val(r['address_components'][0]['short_name'] + ' ' + r['address_components'][1]['short_name']);
});

jQuery geocomplete street_address 不工作

jQuery geocomplete street_address not working

html

javascript

jquery

geolocation

geocomplete