web-dev-qa-db-ja.com

グーグルの適切なイベントは、マウスでオートコンプリート選択を配置します

ドキュメントと同じようにGoogleのオートコンプリートAPIを使用していますが、正常に動作します。ただし、フォームが変更されるたびにajaxで送信されます。正常に動作しますが、マウスで場所のオートコンプリートを使用すると（クリックで場所を選択）。 onchangeをトリガーし、場所が設定される前にフォームを送信します。

この動作をブロックするにはどうすればよいですか？つまり、オートコンプリートをマウスでクリックした後を送信します。

これが例のあるフィドルです： http://jsfiddle.net/8GnZB/2/

_     $(document).ready(function () {
         $location_input = $("#location");
         var options = {
             types: ['(cities)'],
             componentRestrictions: {
                 country: 'be'
             }
         };
         autocomplete = new 
google.maps.places.Autocomplete($location_input.get(0), options);
         $("#search_form input").change(function () {
             var data =  $("#search_form").serialize();
             /* Serialize form & send it to the search view */
             show_submit_data(data);
             return false;
         });
     });

     function show_submit_data(data) {
         $("#result").html(data);
     }

     <script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
     <form id="search_form" action="" method="post" >location :
         <input id="location" name="location" type="text" />
         <br/>data:
         <input id="data" name="data" type="text" />
     </form>Sent data :
     <div id="result"></div>
_

これまでに何とか回避できた唯一の回避策は、change()イベントのタイムアウトですが、ちょっと醜いです。

javascriptjqueryajaxformsgoogle-places-api
11
maazza

問題を解決するには、入力に対して正しいイベントをバインドする必要があります。ライブラリには独自のイベントがあることに注意してください。

使用しているオブジェクトはオートコンプリートです

autocomplete = new google.maps.places.Autocomplete($location_input.get(0), options);

これで、イベントをバインドできますplace_changed必要なときにトリガーされます。この時点で、必要なものをすべて制御できます。

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var data = $("#search_form").serialize();
    console.log('blah')
    show_submit_data(data);
});

これが実際の例です http://jsfiddle.net/8GnZB/7/

34
Jorge