Ladda在输入文本.change事件的按钮上加载动画

时间:2017-06-09 08:42:24

标签: jquery html twitter-bootstrap-3

我有一个与google api相关联的输入类型文本,还有一个按钮,当我在输入中输入内容时,google api会开始搜索位置,而这样做完了,我想在我的网站上加载一些信息按钮直到搜索完成,所以我这样做了:

HTML:

 <div class="form-group">
                    <input type="text"  name="r_name" id="autocomplete" placeholder="Code postale, adresse, rue..." 
                    onFocus="geolocate()" type="text" style="width:40%;">
                         <button href="#" class="btn btn-xl btn-info ladda-button" id="btn"  onclick="displayResto()" style="width:20%;">Chercher <span class="spinner"></span></button>
                    </div>

JS:

var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});


    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.

    var place = autocomplete.getPlace();

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

   function displayResto()
  { 
    var location = document.getElementById('autocomplete').value;
if(location != "x")
{
    localStorage.setItem('location', location);
    window.location.href = "DisplayResto.html";
}
else
{   

    window.location.href = "NotAvalable.html";

     }

}

这是ladda激活和去激活的js,其中包含错误:

 <script type="text/javascript">
     $('#autocomplete').change(function(){
            var l = Ladda.create('#btn');
    l.start();
     });
     $('#autocomplete').autocomplete(function(){
         var l = Ladda.create('#btn');
    l.stop();
     });

   </script>

我做错了什么? 谢谢

0 个答案:

没有答案