jquery 多个字段的 geocomplete 插件

Question

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

使用 geocomplete 网站上的 "form" 示例，我的这个工作正常，自动完成工作正常，并按预期填充所有表单字段。

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

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

问题在于 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 个单独的 containers，这样你就可以在 div 中使用 id = start 和 end 为 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'
});

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

jquery geocomplete plugin for multiple fields

javascript

jquery

google-maps

autocomplete

geocomplete