如何在引导标签输入上应用 Google 自动完成功能？答案

【问题标题】：how to apply Google autocomplete on bootstrap tag-Input?如何在引导标签输入上应用 Google 自动完成功能？
【发布时间】：2017-02-17 09:33:24
【问题描述】：

<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 是否可能适用于引导标记输入。我尝试了此代码，但它不起作用..请指导我

【问题讨论】：

什么是谷歌地址？？
谷歌自动完成 API
将你的函数调用放入 document.ready()

标签： javascript jquery twitter-bootstrap

【解决方案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>

显然你必须在 google 控制台中注册一个 api 密钥

【讨论】：