在谷歌合适的事件放在鼠标自动完成选择 [英] proper event in google places autocomplete select with mouse

问题描述

我使用谷歌的自动完成API就像在文档和它的工作原理 精细。 不过，我有阿贾克斯每次发生变化时提交表单。 它工作正常，但是当我使用自动完成的位置时， 鼠标（选择一个点击的地方）。 它触发的onchange并提交表单的位置设置了。

I am using google's autocomplete api just like in the docs and it works fine. However I have a form submitted with ajax every time it changes . It works fine but when I use the autocomplete for the location with the mouse (choosing a place with a click). It trigger the onchange and submits the form before The location is set.

我如何阻止这种行为？ 我的意思是在鼠标点击自动完成提交

How can I block this behaviour ? I mean submit after the mouse click on the autocomplete.

下面是一个例子小提琴： http://jsfiddle.net/8GnZB/2/

Here is a fiddle with an example : 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>

我身边唯一的工作，设法工作至今是关于的变化（）事件超时，但有点难看。

The only work around I managed to work so far is a timeout on the change() event but is kinda ugly.

推荐答案

要解决你的问题，你需要绑定正确的事件您的输入，请记住，图书馆有自己的活动。

To solved your problem you need to bind the correct event for your input, remember that library have their own events.

这是你使用它的目的是自动完成

The object that you're using it's autocomplete

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

现在可以绑定事件 place_changed 当你需要它的触发，在这一点上，你可以控制任何你所需要的。

Now you can bind the event place_changed which it's trigger when you needed, in this point you can control whatever you need.

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/

Here's a live example http://jsfiddle.net/8GnZB/7/

这篇关于在谷歌合适的事件放在鼠标自动完成选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！