Googleの場所の適切なイベントオートコンプリートはマウスで選択します

Question

私は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()イベントでタイムアウトですが、ちょっと醜いです。

Answer 1

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

あなたはそれが今、あなたはあなたが必要なときに、この時点ではあなたが必要なものは何でも制御することができ、それのトリガーイベントplace_changedをバインドすることができますオートコンプリート

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

です使用しているオブジェクト。

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/