jQuery geocomplete street_address无效

时间:2015-02-11 16:05:59

标签: javascript jquery html5 geolocation geocomplete

我今天一直在试图从 jQuery Geocomplete 中获取字段结果以显示 street_address ,但看起来该插件并未将其呈现为 data-geo ="" 到我的表单字段或其他任何内容!

我的HTML上的Bellow我有用于获取街道名称的字段而另一个用于数字的字段我需要两者的结果才能转到 #BillingAddress < / strong>即可。我相信一些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);
});

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

HERE IS THE FIDDLE

2 个答案:

答案 0 :(得分:2)

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

我快速“修复”以替换“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(" ");

答案 1 :(得分:1)

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

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