Question

我的googleplaceautocomplete脚本需要帮助。我花了将近58个小时，但仍然没有任何线索如何获得解决方案。

如果我键入20街道并点击选项列表结果，则返回完整地址： 20街，洛杉矶，加利福尼亚州，美国。虽然我只想显示20条街道。不知何故，我设法得到了街道地址。

但问题是，当我点击任何选择列表结果（下拉结果）时，它首先返回文本框中的完整地址，然后我的脚本返回我的地址。我试图在用户单击下拉结果时停止填充文本框中的完整地址但我找不到解决方案。

您可以在此处查看我的代码：http://pastebin.com/h9qkhLQw

您可以在此处查看我的实例：http://bhargavshastri.com/gmap-streetaddress/dipu/2.html

我已经尝试了一个星期。任何帮助将不胜感激。

Answer 1

这当然不是最优雅的解决方案，但我很难通过暴露的API找到一种方法......

我使用了第二个输入字段（最初隐藏在自动完成输入字段后面），然后在从自动完成列表中选择一个位置时将其带到前面（因此它隐藏了真正的自动完成）。这可以防止用户看到文本框中填充的完整地址。有关演示，请参阅this Fiddle。

HTML：

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text" onchange="hideAutocomplete()" />
  <!-- Hidden field -->
  <input id="autocompleteDummy" type="text" />
</div>

CSS：

#autocomplete,
#autocompleteDummy {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}

#autocompleteDummy {
  z-index: -1;
}

使用Javascript：

/*
 * Function called when the value in the autocomplete textbox changes so it hides the real autocomplete and displays the 'fake' one
 */
function hideAutocomplete() {
   // Populate the fake autocomplete with the text typed by the user - this prevents a blank box appearing
   document.getElementById('autocompleteDummy').value = document.getElementById('autocomplete').value;
   // Display the fake autocomplete
   document.getElementById('autocompleteDummy').style.zIndex = 1;
   // Hide the real autcomplete
   document.getElementById('autocomplete').style.zIndex = -1;
}

您还需要修改initAutocomplete()功能，以在填充地址字段后显示真实的自动填充功能。为此，请在方法结束之前和for循环之后添加以下行：

 // Display the real autocomplete and hide the fake one
 document.getElementById('autocomplete').style.zIndex = 1;
 document.getElementById('autocompleteDummy').style.zIndex = -1;

我有兴趣看看是否有人能提出更好的解决方案，因为这对我来说仍然有点'hacky'。

首字母

1 个答案: