-1

我正在使用“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 库怎么可能做到这一点？

有什么线索吗？？

4

2 回答 2

0

查看文档，它不需要 2 个单独的表单，只需要 2 个单独container的 s，因此您可以在divid =start和endas中为开头的隐藏字段创建隐藏字段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'
});
于 2015-05-28T13:56:08.830 回答
0

我知道这个线程很旧，但我得到了它的工作。

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

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

我将细节更改为两者的形式，并且效果很好。跳这有帮助。

于 2018-09-18T17:52:28.363 回答