CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-maps-api-3autocomplete
Gajanan
Gajanan

Reputation: 140

Google Map Autocomplete Form Customization

I have implemented google autocomplete form for checkout page. Am able to populate the values to respective input fields.Once the user selects an suggested address from suggestion list am populating the value to input fields. Here I want autocomplete field (where the user types first) #address.line1 value to be changed. So I have implemented the following:

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

above code will gets value in #address.line1 and slice the value till first comma and puts back to #address.line1.

All are working fine when I select suggested address using mouse cursor but if I use keyboard (arrows) to select suggestion then it wont slice the address. #address.line1 is getting filled with entire formated_adddress array.

demo:http://jsfiddle.net/eze0rfuk/4/

screencast: http://screencast.com/t/VW7mAiQL

Please suggest me what might be the problem and solution...

Upvotes: 0

Views: 1090

Answers (1)

Suyash Dixit
Suyash Dixit

Reputation: 937

This must be happening because one click is already binded on address.line1.

What you can do is:

  1. Remove focus from this input field

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

  1. Give focus to next input field (which is actually required when it comes to good user experience)

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

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

If you have any more query please comment.

Regards,

Suyash

Upvotes: 1

Related Questions