jQuery地理完备street_address不工作

Question

今天，我一直在努力让street_address显示jQuery Geocomplete的字段结果，但是它看起来并没有将它呈现为数据-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输入，但是只有当其他输入被键化或按下、单击时，它才会复制，但我希望它们保持隐藏以提高可见性，并使表单对某些人来说不那么复杂，所以当选择Geo结果时，它们会一起填充到这个字段中。

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

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

这是小提琴

Answer 1

fillDetails:函数(结果){“结果”对象在"address_components“中没有"street_address”，它被设置为结果-“名称”的单独属性。如果您刚刚输入搜索词并提交，“名称”将被返回。如果再次单击“查找”，则不会返回“名称”。

我做了一个快速的“修复”来替换"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']);
});