javascript - 将 Google Places Autocomplete pac-container 与输入字段相关联

Question

有什么方法可以将自动完成的 pac-container div 与其附加的输入元素相关联吗？理想情况下，我希望能够将每个 pac-container 的 ID 设置为类似“pac-”的东西，这样我就可以在输入消失时删除它们，并且更容易使用 Selenium 测试自动完成。

This question的答案有一个解决方案，但它不是遥不可及的，因为谷歌倾向于更改各种缩小的属性名称(例如，曾经是 Mc 现在是 Rc)

每当添加新的自动完成功能时，我还尝试修改页面上的最后一个 pac-container div，如下所示:

function attachAutocomplete(id) {
    var input = document.getElementById(id);
    var autocomplete = new google.maps.places.Autocomplete(input);
    $(".pac-container:last").attr("id", "pac-" + id);
}

这适用于加载页面时超出页面上的自动完成的新自动完成，但由于某些原因，在分配前几个自动完成和它们的 pac 容器出现之间存在延迟。 ( Here's a fiddle that should illustrate this approach and how it fails )

我是否缺少某些方法？

Answer 1

我不是通过将每个 .pac-container 与其输入类型表单字段相关联来解决这个问题，而是在每次聚焦自动完成输入类型时重置所有 .pac-container 项目。

所以基本上:

1) 假设我们有 3 个地址输入，其中设置了 google.maps.places.Autocomplete

2) 使用 jquery，让我们将焦点事件绑定(bind)到这 3 个输入

$('#address_1, #address_2, #address_2'.focus(function (e) 
{
    $('.pac-container').each( function() {
        $(this).html( '' );
    });
});

3)给这3个input绑定(bind)focusout事件，并选择对应的selected地址