Question

我正在使用＆＃34; geocomplete＆＃34; JQuery库（http://ubilabs.github.io/geocomplete/），用于将Google商家信息自动填充功能添加到在线表单中，并使用返回的自动填充地址字段数据填充隐藏的表单字段。

使用＆＃34;表格＆＃34;在地理填充网站上的示例中，我运行良好，自动填充工作正常，并按预期填充所有表单字段。

但是，我希望在同一页面上有两个这样的实例，因此我可以为开始和结束位置设置自动完成功能。

我添加了两个自动填充字段并且都正常工作。这一切都很好。

问题是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库怎么可能呢？

任何线索??

Answer 1

浏览文档时，它不需要2个单独的表单，只需要2个单独的container，因此您可以在div中使用id = {为隐藏字段创建隐藏字段{1}}和start为end，然后指定单独的end

e.g。 HTML

detailsAttribute

Javascript：

<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>

Answer 2

我知道这个线程很旧，但是我可以使用它。

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

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

我更改了两者的详细信息形式，并且效果很好。希望对您有帮助。

用于多个字段的jquery geocomplete插件

2 个答案: