Question

我正在尝试在页面的两个位置加载google自动填充功能。导航栏中的一个用于搜索站点，第二个用于用户通过输入地址来创建事件。我可以任一个工作。一旦我俩都工作了，那么就不会填写信息。我很想知道自己在做错什么，现在已经将我的头撞了一个小时。

我的输入是

%USERPROFILE\AppData\Local

和我的js文件

<input class="form-control" id="autocomplete" type="text" placeholder="Search..." name="term">
and
 <input id="autocomplete2" placeholder="Enter address to store" type="text" autocomplete="off"></input>

Answer 1

首先，请确保这些输入除了其ID之外都是相同的。

这是我的一个旧项目中的.slim示例：

    form style="width:300px;margin: 0 auto;" action="/instructions" method="POST"

        strong
          p.input-label I'm currently at...

        input style="width:300px;" id="autocomplete" placeholder="Enter your current address" onFocus="geolocate()" type="text" name="current_address" required="required"

        strong
          p.input-label And I need to get to...

        input style="width:300px;" id="autocomplete2" placeholder="Enter your destination address" onFocus="geolocate()" type="text" name="destination_address" required="required"


        input.button style="width:300px;" type="submit" value="What's the plan?"

您共享的输入具有不同的字段，某些字段相互遗漏，等等。您的第一步应该是使它们在所有可能的方面都相同，然后将其中一个缓慢地移至所需状态。

我看到您也在使用旧版javascript。如果可能的话，您可能要考虑重构为es5 +

在顶部声明placeSearch和autocomplete，但不声明autocomplete2。这是我之前建议的另一个示例，有关逐步遍历代码并确保两个输入均被完全相同地对待/创建。

我看到initAutocomplete已声明但从未运行。这是故意的吗？ Google模块会自动调用该函数吗？

在我看来，addlatlong()和fillInAddress()是您要使用的两个函数，一个用于autocomplete，另一个用于autocomplete2，但是您引用的是{{ 1}}。

总而言之，我认为您一直在弄乱代码，以使其无法正常工作，以至于您最终看不到应该如何编写代码。

也许重新启动一个新文件，然后一次执行一个小步骤，也许是解决该问题的最佳方法。

按预期方式使一个输入完全正常工作，然后按照实现第一个输入的相同步骤，逐步添加下一个输入。

祝你好运！

尝试在一页上加载Google地方自动填充2次

1 个答案: