sự kiện thích hợp trong các địa điểm google tự động hoàn tất chọn bằng chuột

Question

Tôi đang sử dụng api tự động điền của Google giống như trong tài liệu và nó hoạt động tiền phạt. Tuy nhiên, tôi có một biểu mẫu được gửi kèm với ajax mỗi lần thay đổi. Nó hoạt động tốt nhưng khi tôi sử dụng tính năng tự động hoàn tất cho vị trí bằng chuột (chọn địa điểm có nhấp chuột). Nó kích hoạt onchange và gửi biểu mẫu trước khi vị trí được đặt.

Làm cách nào để chặn hành vi này? Tôi muốn gửi sau nhấp chuột vào tự động hoàn tất.

Đây là một fiddle với một ví dụ: 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> 

Công việc duy nhất xung quanh tôi quản lý để làm việc cho đến nay là một thời gian chờ trên các sự kiện change() nhưng là kinda xấu xí.

Answer 1

Để giải quyết vấn đề của bạn, bạn cần phải ràng buộc sự kiện chính xác cho đầu vào của bạn, hãy nhớ rằng thư viện có sự kiện riêng của họ.

Đối tượng mà bạn đang sử dụng nó autocomplete

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

Bây giờ bạn có thể liên kết các sự kiện place_changed mà nó kích hoạt khi bạn cần, trong thời điểm này bạn có thể kiểm soát bất cứ điều gì bạn cần.

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

Dưới đây là một ví dụ sống http://jsfiddle.net/8GnZB/7/