在Google Maps API自动填充中显示不匹配字符串的结果

Question

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

应该附加哪个事件处理程序来检查已经返回了多少新结果的函数？选项可以是输入元素上的'keyup'，但它会在结果返回之前发生;另一种选择是调整“.pac-container”元素的大小（通过Mutation Observer）。我没有在自动填充上看到任何方便的“结果返回”事件。

一旦基本替换工作正常并且事件按顺序触发，则删除字符时会出现更多问题。不知何故，在错误的情况下，额外的结果会卡在div上。 Example JSBin when one gets to this point.

Answer 1

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

一些解释：

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

这些可以在JSBin中看到。我希望这有助于一路上的人！