-1

「geocomplete」JQuery ライブラリ ( http://ubilabs.github.io/geocomplete/ ) を使用して、Google Places オートコンプリートをオンライン フォームに追加し、非表示のフォーム フィールドにオートコンプリートされた住所フィールドの返されたデータを入力します。

geocomplete サイトの「フォーム」の例を使用すると、これがうまく機能し、オートコンプリートが機能し、すべてのフォーム フィールドが期待どおりに入力されます。

ただし、これの 2 つのインスタンスを同じページに配置したいので、開始位置と終了位置のオートコンプリートを設定できます。

両方のオートコンプリート フィールドが追加され、両方が機能しています。これで問題ありません。

問題は、jquery ライブラリが、返された Google データを使用して入力フィールドのセットを 1 つだけ入力することです。

これを変更して、開始場所のフィールド セットと終了場所の別のフィールド セットを入力する方法がわかりません。

私のjqueryセットアップコードは次のとおりです。

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

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

そして、2 つの入力フィールドがあります。

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

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

そして、Google オートコンプリートから返されたデータが入力される非表示フィールドの 1 つのセット。

<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="" />

すべてが期待どおりに機能しますが、入力するフィールドのセットが 1 つしかないため、終了場所を入力すると、開始場所によって入力されたデータが上書きされます。

私がする必要があるのは、隠しフィールドの 2 つのセットを用意することです。

<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とendasendを使用して開始フィールドの非表示フィールドを作成し、別々に指定できます。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 に答える