how to dynamically add and remove the Canada Post autocomplete in Javascript?

it is quite easy to enable the canada post autocomplete, we just need to follow the sample from Canada post autocomplete.

here is the sample code to initialize the Canada post autocomplete to a textbox with id "street-address"

 enableCanadaPostAutoComplete = function () {
        var fields = [
            {
                element: "street-address", field: "Line1"
            },
            {
                element: "street-address2", field: "Line2",
            },
            {
                element: "city", field: "City", mode: pca.fieldMode.PRESERVE
            },
            {
                element: "province", field: "ProvinceCode", mode: pca.fieldMode.POPULATE
            },
            {
                element: "postal", field: "PostalCode", mode: pca.fieldMode.PRESERVE
            },
            { element: "country", field: "CountryIso3", mode: pca.fieldMode.COUNTRY }
        ],
            options = {
                key: sci.CanadaPostKey,
            };

        control= new pca.Address(fields, options);
    }

if you want to remove the Canada post autocomplete feature from the input textbox, then i will show how make it work around

var canadaPostAutoCompleteControl = canadaPostAutoCompleteControl || {};

enableCanadaPostAutoComplete = function () {
        var fields = [
            {
                element: "street-address", field: "Line1"
            },
            {
                element: "street-address2", field: "Line2",
            },
            {
                element: "city", field: "City", mode: pca.fieldMode.PRESERVE
            },
            {
                element: "province", field: "ProvinceCode", mode: pca.fieldMode.POPULATE
            },
            {
                element: "postal", field: "PostalCode", mode: pca.fieldMode.PRESERVE
            },
            { element: "country", field: "CountryIso3", mode: pca.fieldMode.COUNTRY }
        ],
            options = {
                key:  myCanadaPostKey,
            };

        canadaPostAutoCompleteControl = new pca.Address(fields, options);
    }


disableCanadaPostAutoComplete = function () {
        if (canadaPostAutoCompleteControl) {
            canadaPostAutoCompleteControl.destroy();
        }
    }

you can call disableCanadaPostAutoComplete in the click event.

How to customize the Canada Post Autocomplete in its Option Setting?

if you initialize the Canada Post Autocomplete in the docment ready event or anything script loading event. we can handle it with the following code.


 var fields = [
             {
                 element: customerType + "street-address", field: "Line1"
             },
             {
                 element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "city", field: "City", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "province", field: "ProvinceCode", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "postalCode", field: "PostalCode"
             },
             { element: "country", field: "CountryIso3", mode: pca.fieldMode.COUNTRY }
        ],
           options = {
               key: myKey,
               countries: {defaultCode: "CAN", value: "CAN", prepopulate: false, populate:false},
               bar: { visible: false, showCountry: false, showLogo: true, logoLink: false, logoClass: "aclogo"}
                  
            },

          control = new pca.Address(fields, options);

there is an Options paramenters on new Canada Post Address Autocomplete initialization, which will allow us to customize the look and features on the address autocomplete control. the picture shows all the settings that allow us modified in the control

here is the rule for setting up your own values

Key:Value

if there is a group in one attribute. then we have to the curly bracket to organize them together.

Key:{key1:value1, key2:value2......................}

How to solve KnockOut JS observable object not update with Canada Post autocomplete

when i integrate the Canada Post Autocomplete with an KnockOut JS web application, it looks very smooth, all the street related fields had been populated on autocomplete selection.

however, the observable object that binding to the control did not update automatically.


From Canada Post web site, I found this sample code for my own customization on auto populate event

<script type="text/javascript">
 
 addressComplete.listen('load', function(control) {
             control.listen("populate", function (address) {
                 document.getElementById("line1").value = address.Line1;
             });
         });
 
</script>

I try use this in my javascript, but it never work out. actually we only need to setup the controller listen event.

  var fields = [
             {
                 element: customerType + "street-address", field: "Line1"
             },
             {
                 element: "street-address2", field: "Line2", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "city", field: "City", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "province", field: "ProvinceCode", mode: pca.fieldMode.POPULATE
             },
             {
                 element: "postalCode", field: "PostalCode"
             },
             { element: "country", field: "CountryIso3", mode: pca.fieldMode.COUNTRY }
        ],

 options = {
               key: window.MyOwn.canadaPostKey
           },
          control = new pca.Address(fields, options);
        control.listen('populate', function (address) {
            customer.streetAddress(address.Line1);
            customer.city(address.City);
            customer.province(address.ProvinceCode);
            customer.postalCode(address.PostalCode);
            customer.country(address.CountryIso3);
        });