谷歌地图自动完成表单定制

Question

我已经为结帐页面实现了谷歌自动完成表单。能够将值填充到相应的输入字段。一旦用户从建议列表中选择建议的地址，就会将值填充到输入字段。在这里，我想要更改自动完成字段（用户首先输入的位置）#address.line1 值。所以我实现了以下内容：

 var street = document.getElementById("address.line1").value;
 var streetaddress= street.substr(0, street.indexOf(','));
 document.getElementById("address.line1").value = streetaddress;

上面的代码将在#address.line1 中获取值并将该值分割到第一个逗号并放回#address.line1。

当我使用鼠标光标选择建议的地址时，一切正常，但如果我使用键盘（箭头）选择建议，那么它不会分割地址。 #address.line1 被整个 formated_address 数组填充。

演示：http://jsfiddle.net/eze0rfuk/4/

截屏：http://screencast.com/t/VW7mAiQL

请建议我可能是什么问题和解决方案...

Answer 1

这一定会发生，因为在 address.line1 上已经绑定了一次单击。

你可以做的是：

1. 从此输入字段中移除焦点

document.getElementById("addressline1").blur(); var streetaddress= street.substr(0, street.indexOf(',')); document.getElementById("addressline1").value = streetaddress;

1. 将焦点放在下一个输入字段（这实际上是良好的用户体验所必需的）

   $("#route").focus();
   

   var streetaddress= street.substr(0, street.indexOf(',')); document.getElementById("addressline1").value = streetaddress;

如果您还有任何疑问，请发表评论。

问候，

苏亚什