用于多个字段的 jquery geocomplete 插件答案

【问题标题】：jquery geocomplete plugin for multiple fields用于多个字段的 jquery geocomplete 插件
【发布时间】：2015-08-10 22:17:34
【问题描述】：

我正在使用“geocomplete”JQuery 库 (http://ubilabs.github.io/geocomplete/) 将 Google Places 自动完成功能添加到在线表单，并使用自动完成地址字段的返回数据填充隐藏的表单字段。

使用 geocomplete 网站上的“表单”示例，我运行良好，自动完成功能正常，并按预期填充所有表单字段。

但是，我想在同一页面上有两个这样的实例，这样我就可以自动完成开始和结束位置。

我添加了两个自动完成字段并且都可以正常工作。这一切都很好。

问题在于 jquery 库仅使用返回的 Google 数据填充一组输入字段。

我看不到如何更改此设置以填充起始位置的一组字段，以及结束位置的另一组字段。

我的jquery设置代码如下：

$("#startgeocomplete").geocomplete({
details: "form",
types: ["geocode"],
country: 'gb'
});

$("#endgeocomplete").geocomplete({
details: "form",
types: ["geocode"],
country: 'gb'
});

我有两个输入字段：

<input type="text" id="startgeocomplete" name="startlocation" value="pick-up location" />

<input type="text" id="endgeocomplete" name="endlocation" value="end location" />

还有一组隐藏字段，这些字段由 Google 自动完成返回的数据填充，例如：

<input type="hidden" name="lat" value="" />
<input type="hidden" name="lng" value="" />
<input type="hidden" name="formatted_address" value="" />
<input type="hidden" name="postal_code" value="" />

一切都按预期工作，但只有一组字段要填充，当我输入结束位置时，它会覆盖开始位置填充的数据。

我需要做的是有两组隐藏字段，例如：

<input type="hidden" name="start_postal_code" value="" />
<input type="hidden" name="end_postal_code" value="" />

但是我看不出这个 jquery 库怎么可能做到这一点？

有什么线索吗？？

【问题讨论】：

我有一个潜在的 hacky 方法来做到这一点，通过检查任一字段更改值，然后填充“start_postal_code”（如果是调用更改的开始字段），或者“end_postal_code”如果是调用更改的结束字段。但这似乎是一种混乱的方式！
如果使用类而不是 ID 会怎样？ $(".geocomplete").geocomplete({.... 另外，为什么要将值存储在隐藏的输入字段中而不是将它们保存在变量中？无论如何，您可以使用以下方式填充两种不同的表单：details: "#form1" 和 details: "#form2"
我将值存储在隐藏字段中，因为这是较大表单的一部分，并且可以更轻松地将所有内容从同一表单中的一个 POST 发送到下一阶段。两个自动完成输入字段都是同一个表单的一部分。

标签： javascript jquery google-maps autocomplete geocomplete

【解决方案1】：

查看文档，它不需要 2 个单独的表单，只需要 2 个单独的 containers，因此您可以在 id = start 和 end 的 div 中为开头的字段设置隐藏字段为end，然后指定单独的detailsAttribute

例如HTML

<input type="text" id="startgeocomplete" name="startlocation" value="pick-up location" />

<input type="text" id="endgeocomplete" name="endlocation" value="end location" />

<div id="start">
<input type="hidden" data-start="lat" name="start_lat" value="" />
<input type="hidden" data-start="lng" name="start_lng" value="" />
<input type="hidden" data-start="formatted_address" name="start_formatted_address" value="" />
<input type="hidden" data-start="postal_code" name="start_postal_code" value="" />
</div>

<div id="end">
<input type="hidden" data-end="lat"name="end_lat" value="" />
<input type="hidden" data-end="lng" name="end_lng" value="" />
<input type="hidden" data-end="formatted_address" name="end_formatted_address" value="" />
<input type="hidden" data-end="postal_code" name="end_postal_code" value="" />
</div>

Javascript：

$("#startgeocomplete").geocomplete({
details: "start",
detailsAttribute: "data-start"
types: ["geocode"],
country: 'gb'
});

$("#endgeocomplete").geocomplete({
details: "end",
detailsAttribute: "data-end",
types: ["geocode"],
country: 'gb'
});

【讨论】：

感谢您的回答。这不太奏效，但它让我很接近，我现在有一个可行的解决方案。谢谢！
@Richard 很想知道您是如何处理多个请求的。如果可以，请为您自己的问题创建一个答案。谢谢。
这个答案不起作用。 @Richard 也想知道你是如何做到这一点的。

【解决方案2】：

我知道这个帖子很旧，但我可以正常使用。

$("#startgeocomplete").geocomplete({
details: "form",
detailsAttribute: "data-start"
types: ["geocode"],
country: 'gb'
});

$("#endgeocomplete").geocomplete({
details: "form",
detailsAttribute: "data-end",
types: ["geocode"],
country: 'gb'
});

我在两者上都更改了详细信息，并且效果很好。跳这个有帮助。

【讨论】：