如何在bootstrap tag-Input上应用Google自动完成功能?

时间:2017-02-17 09:33:24

标签: javascript jquery twitter-bootstrap

<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标记input.i尝试此代码但它不起作用..请指导我

1 个答案:

答案 0 :(得分:0)

我在我的网站上做过这样的话:

<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密钥