首页 文章

谷歌地方适当的事件自动完成选择鼠标

提问于
浏览 次
10

我正在使用谷歌的自动完成api就像在文档中一样，它工作正常 . 但是，每次更改时，我都会使用ajax提交表单 . 它工作正常，但当我使用鼠标自动完成位置（选择一个点击的地方） . 它触发onchange并在设置位置之前提交表单 .

我怎么能阻止这种行为？我的意思是提交 after 鼠标单击自动完成 .

这是一个例子的小提琴：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" />
         
data:
         <input id="data" name="data" type="text" />
     </form>Sent data :
     <div id="result"></div>

我到目前为止唯一可以解决的工作是 change() 事件超时，但有点难看 .

javascript jquery ajax forms google-places-api

2 回答

  • -1

    要解决您的问题，您需要为输入绑定正确的事件，请记住该库有自己的事件 .

    您正在使用它的对象是自动完成的

    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/

    回复于
  • 32

    要解决此问题，您必须添加侦听器，以便您在鼠标单击时选择位置 .

    Perfectly work on angular2+

    这是代码

    let input1=document.getElementsByTagName('input')[0];
   let autocomplete1 = new google.maps.places.Autocomplete(input1, {
    types: ["address"]
  });


  this.ngZone.run(() => { 
    autocomplete1.addListener('place_changed', function() {
      let place1=autocomplete1.getPlace();
        this.pickup=place1.formatted_address;              
        console.log(this.pickup);
  })
          })

    确保在ngOnInit（）中运行整个代码，并导入ngZone类并在构造函数中声明它，否则ngZone会显示错误 .

    回复于

相关问题