Google Api无法处理附加输入 [英] Google Api not working on appended input

问题描述

背景：

我正在尝试将google地址搜索添加到在线商店。我没有访问该网站的实际html，但我可以将代码输入到页眉，页脚，并包含任何我想要的CSS或js页面。我有一切工作在一开始。我在头文件中输入并能够搜索地址。

其中创建：

用其他地址输入向下输入。我想用javascript来根据他的父母ID在div中附加这个输入。所以我用这段代码做了这个：

  window.onload = function（）{
 var input = document.createElement （ 'DIV'）; 
 input.setAttribute（id，locationField）; 
 input.innerHTML ='< input id =autocompleteplaceholder =输入您的地址onfocus =geolocate（）type =textautocomplete =off>'; 
 
 var form = document.getElementById（'NameAdd'）; 
 form.insertBefore（input，form.firstChild）; 
}; 
  

其中产生了这个：

现在我已经包含了这种输入方式，它不会显示谷歌搜索结果。当检查页面的元素时，一切看起来都很好。

c>构造函数需要一个< input> 元素，而不是< div> 。

这适用于我：

  window.onload = function（）{var inputDiv = document.createElement 'DIV'）; inputDiv.setAttribute（id，locationField）; //动态创建输入元素，所以不需要等待它渲染var input = document.createElement（'input'）; input.setAttribute（id，autocomplete）; input.setAttribute（占位符，输入您的地址）; input.setAttribute（type，text）; input.setAttribute（autocomplete，off）; inputDiv.appendChild（输入）; var form = document.getElementById（'NameAdd'）; form.insertBefore（input，form.firstChild）; var autocomplete = new google.maps.places.Autocomplete（input）;};  

 < script src =https://maps.googleapis.com/maps/api/js?libraries=places>< / script>< form id =NameAdd> < br /> < input id =Namevalue =name/> < input id =Addressvalue =address/>< / form>  

b

Background:

I am trying to add the google address search to an online storefront. I do not have access to the actual html of the site but I am allowed to input code into the header, footer, and include any css or js page I would like. I had everything working in the beginning. I had the input in the header and was able to search for an address.

Which created:

So after I got my code working it was time to move the input down below with the other address inputs. I wanted to use javascript to append this input in a div based on he parent ID. So I did this with this code:

window.onload = function () {
    var input = document.createElement('div');
    input.setAttribute("id", "locationField");
    input.innerHTML = '<input id="autocomplete" placeholder="Enter your address" onfocus="geolocate()" type="text" autocomplete="off">';

    var form = document.getElementById('NameAdd');
    form.insertBefore(input, form.firstChild);
};

Which produced this:

Now that I am including the input this way it is not showing google results. When inspecting the elements of the page everything looks fine. What am I doing wrong?

解决方案

The google.maps.places.Autocomplete constructor takes a <input> element, not a <div>.

This works for me:

window.onload = function() {
  var inputDiv = document.createElement('div');
  inputDiv.setAttribute("id", "locationField");

  // create input element dynamically so don't need to wait for it to render
  var input = document.createElement('input');
  input.setAttribute("id", "autocomplete");
  input.setAttribute("placeholder", "Enter your address");
  input.setAttribute("type", "text");
  input.setAttribute("autocomplete", "off");
  inputDiv.appendChild(input);

  var form = document.getElementById('NameAdd');
  form.insertBefore(input, form.firstChild);
  var autocomplete = new google.maps.places.Autocomplete(input);
};

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<form id="NameAdd">
  <br />
  <input id="Name" value="name" />
  <input id="Address" value="address" />
</form>

这篇关于Google Api无法处理附加输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！