12

短縮版：

Googleプレイスライブラリ（ここではhttps://developers.google.com/maps/documentation/javascript/places ）からGoogleのオートコンプリートの場所を使用していますが、ユーザーがオートコンプリートリストから場所を選択したことを通知する必要があります。他の場所をクリックしたとき、タブアウトしたときなど。

私の目標は、ユーザーが入力要素を操作したがオートコンプリートオプションを選択しなかったときに関数を実行することです。

詳細：

ドキュメントを見ると、場所が変更されたときに（実際には）唯一のイベントが発生しているように見えます。これは、（潜在的に長い）サーバーの往復の後に発生します。ユーザーがリストから何も選択しない場合、そのイベントは発生しません。（ https://developers.google.com/maps/documentation/javascript/reference?hl=fr#Autocompleteのドキュメント ）

オートコンプリートがアタッチする入力要素のblurイベントにリスナーをアタッチできますが、問題は、places_changedイベントが発生するかなり前にblurイベントが発生することです。

これまでに、オートコンプリートの提案に関するイベントを次のようなものでリッスンするなど、さまざまなことを試みてきました。

$('body').on('click', '.pac-item', function(){alert.log('yay!');});

しかし、グーグルライブラリは明らかにイベントを食べます。

どんな助けでも大歓迎です。

ありがとう！

4

1 に答える 1

7

イベントを使用して確認するのではなく、フォームの送信時期を確認する必要があります。ここにステップバイステップがあります：

  1. ユーザーが場所を選択したら、場所と入力のテキスト値を保存します
  2. フォームが送信されたら、入力の値が保存した値と同じかどうかを確認します
  3. 異なる場合、または場所が保存されていない場合は、手動で場所のリクエストを実行します

デモ： http： //jsfiddle.net/robertdodd/FSRd8/7/

上記の小さなデモをまとめました。私がしたことは、検証メソッドをフォームに添付することです。このメソッドは、フォームを送信する前にデータをチェックし、必要に応じて最初に手動ルックアップを実行します。

function validateForm() {
    searchfield = $('#searchfield').val();
    if (searchfield == "" || searchfield == null) { 
        // No text entered
    } else if (place && searchfield == placesearch) { 
        // Success
        return true;
    } else { 
        // place info and search text do not match, perform manual lookup   
        // when lookup is complete, the callback function will store the place info
        // and resubmit the form
    }
    return false;
}

これは何が起こるかの概要に過ぎません。見たい場合は、すべてのコードがデモに含まれています。

これがお役に立てば幸いです。

于 2013-02-03T22:50:13.583 に答える