javascript - 如何在 Bootstrap 标签输入上应用谷歌自动完成功能？

Question

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">
    function initialize() {
        var tags_input = document.getElementById('tags');
        var tag_autocomplete = new google.maps.places.Autocomplete(tags_input );
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

 <div class="form-group wish-tags">
      <label class="col-lg-3 control-label">Already visited:</label>
      <div class="col-lg-8">
          <input type="text" value="" data-role="tagsinput" id="tags" name="visited_tags" class="form-control">
      </div>
</div>

Google 自动完成 API 是否有可能应用于 Bootstrap 标记输入。我尝试了此代码，但它不起作用。.请指导我

Answer 1

我在我的一个网站上做了这样的:

<input type="text" value="" data-role="tagsinput" id="tags" name="visited_tags" class="form-control">

<script>
    function initAutocomplete() {
        var autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('tags')),
            {types: ['geocode']});
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

显然你必须在谷歌控制台中注册一个API key