InvalidValueError：不是HTMLInputElement的实例 - 使用Wordpress进行Google自动填充

Question

我正在尝试将Wordpress中的Google自动填充字段添加到我的functions.php文件中。

我添加了这段代码：

function initAutocomplete() {
    if (is_page ('9')) { 
        ?>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&libraries=places"></script>
            <script type="text/javascript">
                var input = document.getElementById('autocomplete');
                var autocomplete = new google.maps.places.Autocomplete(input);
            </script>
        <?php
    }
}
add_action('wp_head', 'initAutocomplete');

autocomplete是HTML对象中字段的id。

<div id="locationField">
  <input id="autocomplete"
         placeholder="Enter your address"
         type="text"/>
</div>

我收到此错误：

InvalidValueError：不是HTMLInputElement的实例

我已经确定它是一个实际的输入字段。我在实施中错了吗？

Answer 1

弄清楚了！

function initAutocomplete() {
    if (is_page ('compost-intake-form')) { 
        ?>
            <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&libraries=places"></script>
            <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $(function(){
                  var complete;
                  var input = $("#autocomplete")[0];
                  complete = new google.maps.places.Autocomplete(input);
                });
            });
            </script>
        <?php
    }
}
add_action('wp_head', 'initAutocomplete');

[0]是从变量中选择HTML元素。

Got it from here.