InvalidValueError: not an instance of HTMLInputElement - Google Autocomplete with Wordpress答案

【问题标题】：InvalidValueError: not an instance of HTMLInputElement - Google Autocomplete with WordpressInvalidValueError: not an instance of HTMLInputElement - Google Autocomplete with Wordpress
【发布时间】：2019-07-14 10:09:06
【问题描述】：

我正在尝试将 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 对象中 a 字段的 id。

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

我收到了这个错误：

InvalidValueError: 不是 HTMLInputElement 的实例

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

【问题讨论】：

标签： javascript php wordpress autocomplete

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

【讨论】：