jQuery geocomplete street_address 不起作用答案

【问题标题】：jQuery geocomplete street_address not workingjQuery geocomplete street_address 不起作用
【发布时间】：2015-04-12 02:16:06
【问题描述】：

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

在我的 HTML 中，我有字段来获取 街道名称 和另一个用于 number 我需要两者的结果才能转到 #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 输入，但它只会在其他输入被键入或按下、单击时复制，但我希望它们保持隐藏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

【问题讨论】：

标签： javascript jquery html geolocation geocomplete

【解决方案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']);
});

【讨论】：

这也是我必须说的好方法，但我确实更改了插件以避免您正在做的事情，每次有人获得插件时，他们都必须添加更多行来正确绑定功能但是我可以说这完全取决于您选择以您想要的方式使用它，只要它有效！我没有测试你的，但我会记录下来以尝试另一个项目。
我已经搜索了几个小时如何解决这个可怕的问题哈哈。我最终使用了您的解决方案，我可以毫无疑问地说它完美无缺。先生，你应该得到一块饼干。但我不能给你一个 cookie，所以我会简单地支持你的答案。

【解决方案2】：

fillDetails: 函数（结果）{ “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(" ");

【讨论】：