Integrating Address AutoComplete in Editor Create Form

GeorgeIoak

I've got some separate code that I wrote based on Google's API which allows you to start entering an address and then pick from a drop down list. From this all the address fields are parsed and then passed to another function which verifies the address with the USPS API and returns the validated address.

So I'm trying to think of the best way to integrate this into an Editor create form. The user would start to enter an address and once selected the appropriate fields on the form would be filled in

Does anyone have any great ideas on how they would tackle this?

Here's how Google API works, https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

allan

My suggestion would be to do must as the Google example does - have a "dummy" field where the user can type in an address that will do the auto completion (use field().node() to access the container element from which you can then get the input node to attach the auto complete). Then when an auto complete option is selected it would use val() to set the values of other input fields.

Nice little demo that Google API - I haven't come across this one before.

Regards,
Allan

GeorgeIoak

I was thinking along those lines too. Setting the preferred bounds works really well when you're using this for address cleansing too because as you start typing the local address hits pop up first. I worked through 1 demo too that includes the actual map too which is nice for some applications.

Are you thinking that when I use editor.create I would add a dummy field to the form and once in that field the Google functions take over and populate the linked fields? I'm thinking of using the same form but with this fake field (fake because it isn't in the database). Once you select an address from the Google API it populates the real fields on the form and places the cursor at the next required field on the form

GeorgeIoak

See if this makes sense.

1. I added a field to the editor form called theAddress. In the edit and delete functions I hide this field before the form is displayed.
2. I'll create an event watch with something like this:

editor.on('InitCreate', function( e, main ) {
 initialize(); //Google initialize function
//this function will be linked to 'DTE_Field_theAddress' which is the id  
//that gets assigned to Create Form Field 'theAddress'

Once the Google code completes I can use values returned to change the form fields before displaying, something like this:
.field( 'streetAddress' ).val( 'something goes here' )

With the Google code they matched the form field ids with the returned response but in my case the database fields are already defined so I can't be that slick and will have to parse the response and assign each item.

Does this seem reasonable so far?

allan

Sounds just about perfect to me (although use initCreate - it is case sensitive).

Depending on how the Google event handlers work, you might only need to attach the address lookup code once - immediately after the Editor initialisation, rather than using initCreate, which will run every time you click the 'create' button (although you will want to show the field in that event).

For example:

var input = $('input', editor.field('theAddress').node()).get(0);

var autocomplete = new google.maps.places.Autocomplete( input, ... );

Allan

GeorgeIoak

I believe you're right about that so I'll try your suggestion today and see if I can get this to work.

GeorgeIoak

Well it's not pretty but this does work. It's all done outside of the actual Editor code. On the HTML page I have a hidden table with the same IDs that they have defined. Then in my main javascript file I have the following:

    // Initialize the Google Events handler for address lookups
    var input = $('input', editor.field('theAddress').node()).get(0);
    var autocomplete = new google.maps.places.Autocomplete(
        input,
        { types: ['geocode'] });
        // When the user selects an address from the dropdown,
        // populate the address fields in the form.
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
        fillInAddress();
    });
    
    // [START region_fillform]
    function fillInAddress() {
      // Get the place details from the autocomplete object.
      var place = autocomplete.getPlace();

      for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
      }

      // Get each component of the address from the place details
      // and fill the corresponding field on the form.
      for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          var val = place.address_components[i][componentForm[addressType]];
          document.getElementById(addressType).value = val;
        }
      }
//    document.getElementById("DTE_Field_City_chk").value = document.getElementById("locality").value;
      $("#DTE_Field_Delivery_Line_1").val($("#street_number").val() + " " + $("#route").val());
      $("#DTE_Field_City_chk").val($("#locality").val());
      $("#DTE_Field_State_chk").val($("#administrative_area_level_1").val());
      $("#DTE_Field_ZIP_Code").val($("#postal_code").val());
//    console.log(JSON.parse(JSON.stringify(place.address_components)));
    }
    // [END region_fillform]

allan

Superb - thanks for sharing with us!

Regards,
Allan