The HPWINTL_JavaScript method must be called with one of the HPWINTL.USE…CODES parameter to setup the country list box. This function should be added near the end of the Javascript block and the action is normally applied when the page load is complete.

Add “HPWINTL_JavaScript(HPWINTL.USE_OWN_CODES);” to your Javascript block if you do not wish the International JavaScript client to auto-populate the country list box. Please ensure that your country list definition contains valid alpha-2 or alpha-3 codes. If your country list definition contains un-recognised alpha-2 or alpha-3 codes but still want to use them, you can link this code to a valid alpha-3 code with the aliasCountryCodes setting. The aliasCountryCodes defines a key-value pair object which contains a list of alias country codes and alpha-3 codes. For example, UK is not a valid alpha-2 code, but it can be defined as an alias to “United Kingdom” by creating a key-value pair to link the UK code to the GBR alpha-3 code. The HPWINTL.FindAddress will be setup as follows:

  <script>
   HPWINTL.FindAddress({
      ...
      aliasCountryCodes: {"UK":"GBR"},
      ...
    });
  </script>

The topCountries setting is not applicable when the HPWINTL_JavaScript method is called with the HPWINTL.USE_OWN_CODES parameter.

By adding “HPWINTL_JavaScript(HPWINTL.USE_ALPHA2_CODES);” or “HPWINTL_JavaScript(HPWINTL.USE_ALPHA3_CODES);” to your Javascript block, the International JavaScript Client will auto-populate the country list box with the corresponding alpha2 or alpha3 country codes. The country list drop-down boxed referenced by the countryListBox will be populated and updated accordingly. The topCountries setting will be applied when the HPWINTL_JavaScript method is called with the HPWINTL.USE_ALPHA2_CODES or HPWINTL.USE_ALPHA3_CODES parameter. Country or countries that are specified in the topCountries setting will be listed at the top of the populated country list when presented to the user.

To view an exhaustive listing of the Alpha2 and Alpha3 codes referenced in the above and the data coverage level of that country (SubPremise, HouseNumber, HouseNumberRange, Street, City, or None), use one of the below URLs in a browser…

https://cloud.hopewiser.com/atlaslive/countries/json

or

https://cloud.hopewiser.com/atlaslive/countries/xml

Enter your Hopewiser Address Lookup username and password when prompted.

This can be useful if, for example, you need delivery point information or if you want premise details separately from the street information. In the HPWINTL object that you pass in to the HPWINTL.FindAddress() function, you can include an optional detail object containing the names of the address elements that you want, and the HTML IDs of the fields that you want the values returned to. For example:

  
function HPWINTL_JavaScript(mode) {
    HPWINTL.FindAddress({
      auth: "yourAuthCode",          // required
      input: "txtInput",             // required
      countryListBox: 'inpCountryList', // required 
      output: {
        line1:    "txtAddress",      // required
        line2:    "txtAddress",      // optional
        line3:    "txtAddress",      // optional
        line4:    "txtAddress",      // optional
        line5:    "txtAddress",      // optional
        line6:    "txtAddress",      // optional
        line7:    "txtAddress"       // optional
      },
      detail: {                      // optional
        Premise: "txtPremise",
        Organisation:   "txtOrganisation"
      },
      Mode: mode
    });
  }

In the International JavaScript object that you pass in to the HPWINTL.FindAddress() function, you can include an optional extra object containing the names of the extra data elements that you want, and the HTML IDs of the fields that you want the values returned to. This is currently limited to Latitude and Longitude. For example:

  
function HPWINTL_JavaScript(mode) {
    HPWINTL.FindAddress({
      auth: "yourAuthCode",            // required
      input: "txtInput",               // required
      countryListBox: 'inpCountryList', // required 
      output: {
        line1:    "txtLine1",          // required
        line2:    "txtLine2",          // optional
        line3:    "txtLine3",          // optional
        line4:    "txtLine4",          // optional
        line5:    "txtLine5",          // optional
        line6:    "txtLine6",          // optional
        line7:    "txtLine7"          // optional
      },
      Mode: mode,
      extra: {                         // optional
        Extra_LATTITUDE:  "txtLatitude",
        Extra_LONGITUDE: "txtLongitude"
      }
    });
  }

This can be useful if, for example, you need to enable a button or if you want to display the address on a map. In the International JavaScript object that you pass in to the HPWINTL.FindAddress() function, you can include an optional success attribute containing the function that you want to call. For example:

  
 function HPWINTL_JavaScript(mode) {
    HPWINTL.FindAddress({
      auth: "yourAuthCode",          // required
      input: "txtInput",             // required
      countryListBox: 'inpCountryList', // required 
      output: {
        line1:    "txtAddress",      // required
        line2:    "txtAddress",      // optional
        line3:    "txtAddress",      // optional
        line4:    "txtAddress",      // optional
        line5:    "txtAddress",      // optional
        line6:    "txtAddress",      // optional
        line7:    "txtAddress"       // optional
      },
      Mode: mode,
      success: EnableButton         // optional
    });
  }

  function EnableButton() {
    document.getElementById("btnNext").disabled = false;
  }

The Select and Cancel buttons have a class of btn. You can define this class in your CSS or you can use jQuery to add your own class:

$(".btn").addClass("myButtonClass");

The Select button has a class of btn-primary and the Cancel button has a class of btn-default. If you want to style the buttons individually, you can define these classes in your CSS or you can use jQuery to add your own classes:

  $(".btn-primary").addClass("myPrimaryButtonClass");
  $(".btn-default").addClass("myDefaultButtonClass");

You can also reference the Select button using its ID hpw-btnOK.

The status bar has a class hpw-info and its ID is hpw-status. The ID of the list of possible matches is hpw-possibles. Both the status bar and the list of possible matches are contained within div elements that have the class form-group.