在谷歌地图API自动完成中显示不匹配字符串的结果

Showing results for an non-matching string in Google Maps API Autocomplete

本文关键字：不匹配显示字符串结果 API 谷歌地图更新时间：2024-04-22

客户端希望用户能够在自动完成下拉列表中输入乱码文本或不正确的文本，并显示最后一个正确的匹配（而不是默认情况下清空下拉列表）。类似地，当用户删除破坏它的字符时，正常的自动完成功能需要重新启动

应该附加哪个事件处理程序来检查返回了多少新结果？选项可以是输入元素上的"keyup"，但它发生在结果返回之前；另一个选项是调整".pac容器"元素的大小（通过突变观察者）。我在Autocomplete上没有看到任何方便的"结果返回"事件。

一旦基本替换工作正常，事件按顺序启动，那么在删除字符方面就会出现更多问题。不知怎的，在错误的情况下，额外的结果会被困在div上。例子JSBin当一个人到达这一点。

这里可以看到最终的JSBin解决方案。

一些解释：

从本质上讲，这会获得最后一个成功状态，并重新应用它，直到再次出现成功状态
我选择在keyup事件上设置Timeout，因为使用MutationObserver触发太不可靠，次数太多，很难存储和返回到旧状态
需要将类添加到添加的结果中，这样我就可以在下拉列表中操作新的和旧的结果
需要建立一套相当复杂的条件，以使其在删除时不会中断，并在不同情况下实际删除正确的元素。这些情况大致对应于：
- 没有结果并且上次成功
- 没有结果并且上次失败
- 某些结果和上次失败
- 一些结果和上次成功
包含一个功能，在用户单击关闭时强制删除下拉列表

这些可以在工作中的JSBin中看到。我希望这能帮助到一些人！