AddressHelper Examples

AddressHelper is a simple addition to any website, adding the ability to quickly autocomplete any address within Australia. Some of the examples below will demonstrate the ease of integration and vast flexibility.

The previous version of AddressHelper used three different display types: Floating, Inline and Popup. These were used to allow integration into existing websites. The current version removes this complex adding to a website and allows for easy intergration.

Floating

Was used to add an on-page floating popup window to a page without having to change the existing form. This has been replaced with immediate integration of input box fields without the need to change pre-existing code. An example of this can be found here.

Inline

Was used within the page literally the AddressHelper and HotLocality was embedded into the page. This is similar to how the new version of AddressHelper works. By simply adding an AddressHelper or HotLocality div to the page it will have access to simple add an AddressHelper or HotLocality to any pre-existing Input Fields. An example can be found here.

Popup

Was used to open Windowed Popup and allow the User to enter an address within the Popup Window. This has been taken out of the default options in AddressHelper, this functionality can be recreated using a separate JavaScript package. Functionality such as this is simple to do within a page an example can be found here.

Adding AddressHelper to a page

By simply adding the necessary JavaScript and CSS files to the head of a webpage any site can enable an AddressHelper.

In the head of any website add:

<script type="text/javascript" src="SERVICE/addresshelper/scripts/utils/jquery.js" ></script>
<script type="text/javascript" src="SERVICE/addresshelper/scripts/utils/legacy.js" ></script>
<script type="text/javascript" src="SERVICE/addresshelper/scripts/utils/jquery.autocomplete.js" ></script>
<script type="text/javascript" src="SERVICE/addresshelper/scripts/InputField.js" ></script>
<script type="text/javascript" src="SERVICE/addresshelper/scripts/AddressHelper.js" ></script>

If you wish to use the minified version add the following single line to your websites header:

This file contains the entire repertoire of files needed to run AddressHelper but in a convenient and small size.

<script type="text/javascript" src="SERVICE_END_POINT/addresshelper/scripts/addresshelper-packed.js" ></script>
A minimum set of CSS elements should be available to the page for the suggestion DIVs:

  .ac_results
  .ac_results ul
  .ac_results li
  .ac_loading
  .ac_odd
  .ac_over

The dafault CSS can be included in your page and give you the most common look and feel. Or you can oeverride these in your own CSS file. To include the default CSS add the following to the HEAD of your HTML page:

<link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/>

Example Index

Here are some examples of how to use AddressHelper, these show the flexibility you have when defining your AddressHelper.

Example 1 - Smallest amount of code for an AddressHelper «Back to index

This example shows the smallest extend to which an AddressHelper can be added to a website. This is an unformatted version but shows just how small the footprint can be. Notice the 'type' attribute added to the options when creating the new AddressHelper is set to 'addresshelper', this value is used by the client javaScript to form the AddressHelper Input Fields and has two possible values: 'addresshelper' OR 'hotlocality'. For more on this please read the detailed Options under the Options tab at the top. For all AddressHelper creations this value must be present as the default is 'hotlocality'.

This example uses a single DIV to populate the AddressHelper INPUT fields. Notice the ID of the DIV is the name 'addresshelper' which is the default id given to any AddressHelper, unless overwritten. See the Options Page above for more information on overwriting different settings.

Example 1 - Smallest amount of code for an AddressHelper «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ new AddressHelper({type: 'addresshelper'}).create(); }); </script> </head> <body> <div id="addresshelper"></div> </body> </html>

Example 2 - Using Field Names «Back to index

This example shows how by defining separate DIVs with corresponding ID's to field names (prepended with the prefix), AddressHelper will look for and populate these DIVs the same way it would have if you have only defined a single DIV as shown in the example above. Notice how easy it is to layout the AddressHelper with a simple table, this could easily be replaced by CSS styling.

This can be useful for specifying different fields. For instance if you only want the State, Suburb and Street Name fields you only need add them to your website. See here for more on configurable fields.

A point to note in this example is the use of the prefix option, this has been added in this second example to allow us to have multiple AddressHelpers on a single page. This has the obvious benefit of allowing more then one AddressHelper/HotLocality on the one page and allowing you to override the default name with a single assignment to the option prefix.

State
Suburb
Street Name
Street Type
Street Number
Flat Number

Example 2 - Using Field Names «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var addressHelper = new AddressHelper({prefix: 'mudStore', type: 'addresshelper'}); if (addressHelper.sanityCheck()) { addressHelper.create(); } }); </script> </head> <body> <table width="300" border="0"> <tr> <td>State</td> <td><div id="mudStore_state"></div></td> </tr> <tr> <td>Suburb</td> <td><div id="mudStore_suburb"></div></td> </tr> <tr> <td>Street Name</td> <td><div id="mudStore_streetName"></div></td> </tr> <tr> <td>Street Type</td> <td><div id="mudStore_streetType"></div></td> </tr> <tr> <td>Street Number</td> <td><div id="mudStore_streetNumber"></div></td> </tr> <tr> <td>Flat Number</td> <td><div id="mudStore_flatNumber"></div></td> </tr> </table> </body> </html>

Example 3 - Using ID of Input Filed Element«Back to index

This example shows just how easy it is to integrate the AddressHelper into a pre-existing website where Input Fields have already been defined. As you can see from the source code, each field has an ID corresponding to the name of the AddressHelper field. This can be overwritten in the options of the field thus easily 'connecting' your AddressHelper to your pre-existing Input Fields.

State
Suburb
Street Name
Street Type
Street Number
Flat Number

Example 3 - Using ID of Input Filed Element«Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var addressHelper = new AddressHelper({id: 'advancedAH', type: 'addresshelper'}); addressHelper.get('fields').state.set({elementId: 'stateForm'}); addressHelper.get('fields').suburb.set({elementId: 'suburbForm'}); addressHelper.get('fields').streetName.set({elementId: 'streetNameForm'}); addressHelper.get('fields').streetType.set({elementId: 'streetTypeForm'}); addressHelper.get('fields').streetNumber.set({elementId: 'streetNumberForm'}); addressHelper.get('fields').flatNumber.set({elementId: 'flatNumberForm'}); if (addressHelper.sanityCheck()) { addressHelper.create(); } }); </script> </head> <body> <table width="300" border="0"> <tr> <td>State</td> <td><input type="text" id="stateForm"></input></td> </tr> <tr> <td>Suburb</td> <td><input type="text" id="suburbForm"></td> </tr> <tr> <td>Street Name</td> <td><input type="text" id="streetNameForm"></td> </tr> <tr> <td>Street Type</td> <td><input type="text" id="streetTypeForm"></td> </tr> <tr> <td>Street Number</td> <td><input type="text" id="streetNumberForm"></td> </tr> <tr> <td>Flat Number</td> <td><input type="text" id="flatNumberForm"></td> </tr> </table> </body> </html>

Example 4 - Changing the prefix and id options «Back to index

This small example shows the use of both IDs and PREFIX. By changing the PREFIX we have to add the PREFIX followed by an underscore to the front of the AddressHelpers ID. So by setting the ID to 'mudStore' and the PREFIX to 'loamOrder' we get an ID of 'laomOrder_mudStore'.

Example 4 - Changing the prefix and id options «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore1 = new AddressHelper({prefix: 'loamOrder', id:'mudStore', type: 'addresshelper'}); if (mudStore1.sanityCheck()){mudStore1.create();} }); </script> </head> <body> <div id="loamOrder_mudStore"></div> </body> </html>

Example 5 - Changing the Delay Option «Back to index

Delaying the search mechanism by a specified amount allows for slow typisest and sometimes better performance from the back end service by allowing more input to be enterend.

10 seconds (10000 ms)
3 seconds (3000 ms)

Example 5 - Changing the Delay Option «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore3 = new AddressHelper({prefix: 'sandOrder', delay: 10000, type: 'addresshelper'}); if (mudStore3.sanityCheck()) { mudStore3.create();} var mudStore4 = new AddressHelper({prefix: 'gravelOrder', delay: 3000, type: 'addresshelper'}); if (mudStore4.sanityCheck()) { mudStore4.create();} }); </script> </head> <body> 10 seconds (10000 ms)<div id="sandOrder_addresshelper"></div> 3 seconds (3000 ms)<div id="gravelOrder_addresshelper"></div> </body> </html>

Example 6 - Changing the maxReturnValues option «Back to index

The number of returned values can be changed simply by changing the argument 'maxReturnValues'. This can be useful if you only want to show a small number of possible suggestions at a time. This could also be used to speed up transactions as the more data moved over the network the slower the data transfer may be.

If there are only 3 returned values and you have specified 10 for the maxReturnValues only 3 will be displayed.

10 results

If you are showing more then 5 results, it is advised to set the css style (max height and overflow properties) of the suggestion box to make it show with a scrollbar. Allowing the User to scroll further down to select from a large list of results. This is far more user friendly than having a huge suggestion box.

+10 results
1 result

Example 6 - Changing the maxReturnValues option «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore5 = new AddressHelper ({prefix: 'gypsonOrder', maxReturnValues: 10, type: 'addresshelper'}); if (mudStore5.sanityCheck()) { mudStore5.create();} var mudStore5a = new AddressHelper ({prefix: 'gypsonOrder2', maxReturnValues: 100, type: 'addresshelper'}); if (mudStore5a.sanityCheck()) { mudStore5a.create();} var mudStore6 = new AddressHelper ({prefix: 'hardRockOrder', maxReturnValues: 1, type: 'addresshelper'}); if (mudStore6.sanityCheck()) {mudStore6.create();} }); </script> </head> <body> 10 results<div id="gypsonOrder_addresshelper"></div> 1 result<div id="hardRockOrder_addresshelper"></div> </body> </html>

Example 7 - Changing the wrapper (DIV) styleClass and class options «Back to index

Changing the wrapped style of an AddressHelper is simple, there are two style attributes that can be changed, 'style' and 'styleClass'

The 'style' attribute is a raw style where by the CSS style will be added inline to the AddressHelper as can be seen below in the Kurosol example.

The 'styleClass' attribute sets the name of the CSS class name for which the webpage has access to, this could be your own CSS file.

Kurosol, delivered to your door:
Sodosol, delivered to your door:

Example 7 - Changing the wrapper (DIV) styleClass and class options «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- Style --> <style type="text/css"> .mudStore { color:#fafafa; background:red; } </style> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore7 = new AddressHelper ({prefix: 'kurosolOrder', style: 'color:white;background:brown;', type: 'addresshelper'}); if (mudStore7.sanityCheck()) { mudStore7.create();} var mudStore8 = new AddressHelper ({prefix: 'sodosolOrder', styleClass: 'mudStore', type: 'addresshelper'}); if (mudStore8.sanityCheck()) {mudStore8.create();} }); </script> </head> <body> </body> </html>

Example 8 - Changing the input field styleClass and class options «Back to index

As was seen in the previous example we can change the CSS styling of the entire AddressHelper, but also we can change each individual Input Field style in a similar manner.

The 'style' attribute for each field can be change as can the 'styleClass'. This is illustrated below in the examples.

Special on Chromosol:
Special on Vertosol:

Example 8 - Changing the input field styleClass and class options «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- Style --> <style type="text/css"> .mudStore { color:#fafafa; background:#f5962f; } </style> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore9 = new AddressHelper ({prefix: 'chromosolOrder', type: 'addresshelper' }); mudStore9.get('fields').state.set({style: 'color:white;background-color:red;'}); mudStore9.get('fields').suburb.set({style: 'color:white;background-color:blue;'}); mudStore9.get('fields').streetName.set({style: 'color:white;background-color:green;'}); mudStore9.get('fields').streetType.set({style: 'color:white;background-color:pink;'}); mudStore9.get('fields').streetNumber.set({style: 'color:white;background-color:yellow;'}); mudStore9.get('fields').flatNumber.set({style: 'color:white;background-color:purple;'}); if (mudStore9.sanityCheck()) {mudStore9.create();} var mudStore10 = new AddressHelper ({refix: 'vertosolOrder', type: 'addresshelper'}); for (i in mudStore10.get('fields')) { var f = mudStore10.get('fields')[i]; f.set({styleClass: 'mudStore'});} if (mudStore10.sanityCheck()) { mudStore10.create();} }); </script> </head> <body> </body> </html>

Example 9 - Changing the display element ID «Back to index

By changing the 'displayId' attribute you can display the results of all of the fields combined in the format: 'flatNumber/streetNumber streetName streetType suburb state'. The 'displayId' must reference the ID of a DIV that you have specified within your website.

Example 9 - Changing the display element ID «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore13 = new AddressHelper({prefix: 'calcarosolOrder', displayElementId: 'result', type: 'addresshelper'}); if (mudStore13.sanityCheck()) { mudStore13.create();} }); </script> </head> <body> <div id="result" class="result"></div> </body> </html>

Example 10 - Changing the display elementId per field «Back to index

Changing the elementId (which should reference a DIV) on individual Input Fields displays the results from the Field in the specified DIV.

Example 10 - Changing the display element ID per field «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore23 = new AddressHelper({prefix: 'simpleMudOrder', displayElementId: 'result1', type: 'addresshelper'}); mudStore23.get('fields').state.set({displayElementId: 'stateResult'}); mudStore23.get('fields').suburb.set({displayElementId: 'suburbResult'}); mudStore23.get('fields').streetName.set({displayElementId: 'streetNameResult'}); mudStore23.get('fields').streetType.set({displayElementId: 'streetTypeResult'}); mudStore23.get('fields').streetNumber.set({displayElementId: 'streetNumberResult'}); mudStore23.get('fields').flatNumber.set({displayElementId: 'flatNumberResult'}); if (mudStore23.sanityCheck()) { mudStore23.create();} }); </script> </head> <body> <div id="result1" class="result"></div> <div id="stateResult" class="result"></div> <div id="suburbResult" class="result"></div> <div id="streetNameResult" class="result"></div> <div id="streetTypeResult" class="result"></div> <div id="streetNumberResult" class="result"></div> <div id="flatNumberResult" class="result"></div> <div id="simpleMudOrder_addresshelper"></div> </body> </html>

Example 11 - Changing the geocode option, separate DIV displays «Back to index

To enable Geocoding of your result addresses set the attribute 'geocode' to true. This will then in turn Geocode each result as it is selected. To display the coordinates also add the option attribute 'longitudeElementId' and 'latitudeElementId'. Which are DIVs where the longitude and latitude will be displayed.

To further improve the User experience the unsuccessfulGeocode option can be set to show the user no geocode was found for the entered address. Example two shows this, use: SA WADDIKEE WADDIKEE ROAD as an example without a geocode.

Results:
No geocode:

Example 11 - Changing the geocode option, separate DIV displays «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore14 = new AddressHelper({prefix: 'dermosolOrder', geocode: true, longitudeElementId: 'lon', latitudeElementId: 'lat', type: 'addresshelper'}); if (mudStore14.sanityCheck()) { mudStore14.create();} var mudStore14a = new AddressHelper({prefix: 'dermosolOrder2', geocode: true, unsuccessfulGeocode: unsuccessfulGeocodeCallBack, type: 'addresshelper'}); if (mudStore14a.sanityCheck()){mudStore14a.create();} function unsuccessfulGeocodeCallBack(){ $('#noResult').html('No geocode for the entered address'); } }); </script> </head> <body> <div id="lon" class="result"></div> <div id="lat" class="result"></div> <div id="dermosolOrder_addresshelper"></div> <div id="noResult" class="result"></div> No geocode: <div id="dermosolOrder2_addresshelper"></div> </body> </html>

Example 12 - Changing the geocode option, single DIV display «Back to index

To enable Geocoding of your result addresses set the attribute 'geocode' to true. This will then in turn Geocode each result as it is selected. To display the coordinates in a single DIV set both 'longitudeElementId' and 'latitudeElementId' to the same DIV.

Example 12 - Changing the geocode option, single DIV display «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore15 = new AddressHelper({prefix: 'topsoilOrder', geocode: true, longitudeElementId: 'coords', latitudeElementId: 'coords', type: 'addresshelper'}); if (mudStore15.sanityCheck()) { mudStore15.create();} }); </script> </head> <body> <div id=coords class="result"></div> <div id="topsoilOrder_addresshelper"></div> </body> </html>

Example 13 - Events on results «Back to index

To have an action fire upon a result of a geocode or a simple address result set the attribute 'geocodeResult' or 'result' to a function that you have specified.

To have AddressHelper trigger a function upon any result set the attribute 'result' to a function. The example below simply alerts the user of their location upon a result.

To have AddressHelper trigger a function upon a geocode result set the attribute 'geocodeResult' to a function. The example below sets the OpenLayers map to the current location of the AddressHelper.

This can also be done for each individual field, an example of this can be seen here

Move map:
To Screen:

Example 13 - Events on results «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- CSS Files --> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/css/default.css"/> <!-- Style --> <style type="text/css"> .map { height: 200px; width: 200px; border: 1px solid #3998c6; } </style> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <!-- Map Scripts --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/utils/LaunchMap.js" ></script> <script type="text/javascript" src="http://terrapages.net/tpapi/default/2.7/OpenLayers.js"></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore16 = new AddressHelper({prefix: 'undersoilOrder', geocode: true, geocodeResult: doMyBidding, type: 'addresshelper'}); if (mudStore16.sanityCheck()) { mudStore16.create();} var mudStore17 = new AddressHelper({prefix: 'oversoilOrder', result: doMyBidding2, type: 'addresshelper'}); if (mudStore17.sanityCheck()) { mudStore17.create();} function doMyBidding(lon, lat){var data = mudStore16.get('current'); zoomToCenter(lon, lat, data); } function doMyBidding2(data, formatted){ alert('Your at ' + formatted); } createMap(138.6, -34.93); }); </script> </head> <body> Move map: <div id="undersoilOrder_addresshelper"></div> To Screen: <div id="oversoilOrder_addresshelper"></div> </body> </html>

Example 14 - Data Access «Back to index

Access to the current data (data that has been processed by the AddressHelper) is a simple call to the options. This example shows how easy it should be to grab the current data and display it to the user. There is four different options for getting the data, 'longitude', 'latitude', 'current' and 'data'.

The 'longitude' attribute holds the currently top ranked longitude value for the AddressHelper.

The 'latitude' attribute holds the currently top ranked latitude value for the AddressHelper.

The 'current' attribute holds the currently top ranked result value for the AddressHelper. This value is the set by each field, which means this value is not a field dependent field rather it is a global value.

The 'data' attribute holds an array of current values for which the last suggestion list was based.

Geocode Data:
Current Top Suggestion:
Current Data:
Current and Location Data:

Example 14 - Data Access «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var mudStore18 = new AddressHelper({ prefix: 'redsoilOrder', geocode: true, geocodeResult: doMyBidding3, type: 'addresshelper' }); if (mudStore18.sanityCheck()) { mudStore18.create(); } var mudStore19 = new AddressHelper({ prefix: 'bluesoilOrder', result: doMyBidding4, type: 'addresshelper' }); if (mudStore19.sanityCheck()) { mudStore19.create(); } var mudStore20 = new AddressHelper({ prefix: 'greensoilOrder', result: doMyBidding5, type: 'addresshelper' }); if (mudStore20.sanityCheck()) { mudStore20.create(); } var mudStore21 = new AddressHelper({ prefix: 'pinksoilOrder', type: 'addresshelper' }); for (i in mudStore21.get('fields')) { var f = mudStore21.get('fields')[i]; f.set({result: doMyBidding6, geocodeResult: doMyBidding7}); } if (mudStore21.sanityCheck()) { mudStore21.create(); } function doMyBidding3(){ alert('Your fields GEOCODE suggestion is \n lon: ' + mudStore18.get('longitude') + '\n lat:' + mudStore18.get('latitude')); } function doMyBidding4(){ alert('Your fields CURRENT suggestion is \n ' + mudStore19.get('current')); } function doMyBidding5(data){ var output = 'Current data : \n'; for (i in data) { output += i + '. ' + data[i] + '\n'; } alert(output); } function doMyBidding6(){ alert('Your fields GEOCODE suggestion is \n lon: ' + mudStore21.get('longitude') + '\n lat:' + mudStore21.get('latitude')); } function doMyBidding7(){ alert('Your fields CURRENT suggestion is \n ' + mudStore21.get('current')); } }); </script> </head> <body> Geocode Data: <div id="redsoilOrder_addresshelper"></div> Current Top Suggestion: <div id="bluesoilOrder_addresshelper"></div> Current Data: <div id="greensoilOrder_addresshelper"></div> Current and Location Data: <div id="pinksoilOrder_addresshelper"></div> </body> </html>

Example 15 - Configurable Fields «Back to index

This example draws further on the simplicity of the design where by NOT specifying some fields you can remove them from the layout.

State
Suburb
Street Name

Example 15 - Configurable Fields «Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="SERVICE_END_POINT/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var addressHelper23 = new AddressHelper({prefix: 'greenbluesoilOrder', type: 'addresshelper'}); if (addressHelper23.sanityCheck()) { addressHelper23.create(); } }); </script> </head> <body> <table width="300" border="0"> <tr> <td>State</td> <td><div id="greenbluesoilOrder_state"></div></td> </tr> <tr> <td>Suburb</td> <td><div id="greenbluesoilOrder_suburb"></div></td> </tr> <tr> <td>Street Name</td> <td><div id="greenbluesoilOrder_streetName"></div></td> </tr> </table> </body> </html>

Example 16 - Select Fields «Back to index

Using SELECT TAG's you can utilse the flexibility of the AddressHelper by specifying your fields as dropdown boxes, as in the example below.

The example shows two ways to specify a select box for a field, firstly by giving AddressHelper the ID of a SELECT TAG with no options and passing as a paramater to AddressHelper the options. Secondly by specifying the ID of a SELECT TAG and adding your own OPTION TAG's within.

State
Suburb
Street Name
Street Type

Example 16 - Select Fields«Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- CSS Files --> <link rel="stylesheet" type="text/css" href="http://terrapages.net/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="http://terrapages.net/addresshelper/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var myStates = {SA: 'South Australia'}; var mySuburbs = {WAYVILLE: 'Wayville', 'WOODVILLE GARDENS': 'Woodville et. al', ELIZABETH: 'Elizabeth'}; var addressHelper24 = new AddressHelper({prefix: 'purpleOrder', type: 'addresshelper', debug: true}); addressHelper24.get('fields').state.set({data: myStates}); addressHelper24.get('fields').suburb.set({data: mySuburbs}); if (addressHelper24.sanityCheck()) { addressHelper24.create(); } }); </script> </head> <body> <table width="300" border="0"> <tr> <td>State</td> <td><select id="purpleOrder_state"></select></td> </tr> <tr> <td>Suburb</td> <td><select id="purpleOrder_suburb"></select></td> </tr> <tr> <td>Street Name</td> <td> <select id="purpleOrder_streetName"> <optgroup label="Wayville"> <option value="Davenport">Davenport</option> <option value="Rose">Rose</option> </optgroup> <optgroup label="Elizabeth"> <option value="Ridley">Ridley</option> <option value="Goodman">Goodman</option> </optgroup> <optgroup label="Woodville Gardens"> <option value="First">First</option> <option value="Second">Second</option> </optgroup> </select> </td> </tr> <tr> <td>Street Type</td> <td><div id="purpleOrder_streetType"></div></td> </tr> </table> </body> </html>

Example 17 - No Suggestions«Back to index

Change the "No Suggestion" text or have the callback do something for your user. This is not fine grained for per field, only a general callback.

Example 17 - No Suggestions«Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- CSS Files --> <link rel="stylesheet" type="text/css" href="http://terrapages.net/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="http://terrapages.net/addresshelper/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var addressHelper25 = new AddressHelper({prefix: 'moresoilOrder', type: 'addresshelper', noSuggestionsText: 'Oh Noes, no suggestions!', noSuggestions: noSuggestionsFound, hasSuggestions: hasSuggestions}); if (addressHelper25.sanityCheck()) { addressHelper25.create(); } function noSuggestionsFound(){ $('#nosuggestions').stop().fadeIn(2000).fadeOut(3000); } function hasSuggestions(){ $('#hassuggestions').stop().show(2000).hide(3000); } }); </script> </head> <body> <div id="moresoilOrder_addresshelper"></div> <div id="nosuggestions" style="display: none; color:red;">No Suggestions!</div> </body> </html>

Example 18 - Postcode«Back to index

A User can search the suburb field using a postcode, for example looking for suburbs in Adelaide, start typing '500' into the Suburb field and you will be shown Suburbs starting with '500'. Selecting any of the suggestions will populate the Suburb in the Suburb field without the postcode.

This example shows three AddressHelpers the top showing postcodes next to the Suburb, Street Name and Street Type fields, this is the default behaviour of an AddressHelper. Next this feature switched off, not displaying the postcodes, and the third showing how to access the postcode data (same as above in Data Access Example).

*Using this example you can see why its useful to have postcode displayed:

State: nsw
Suburb: the rocks
Street Name: mill
Street Type: *

Simple use to hide the postcode from any field, this will not stop the searching feature but the postcode will not be displayed in any of the suggestions.

Normal behaviour:

Hiding the postcode

Example 18 - Postcode«Back to index

Launch example in a new window Launch
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- CSS Files --> <link rel="stylesheet" type="text/css" href="http://terrapages.net/addresshelper/css/default.css"/> <!-- AddressHelper --> <script type="text/javascript" src="http://terrapages.net/addresshelper/scripts/addresshelper-packed.js" ></script> <script type="text/javascript"> $(document).ready(function(){ var addressHelper26 = new AddressHelper({prefix: 'nopostcodesoilOrder1', type: 'addresshelper'}); if (addressHelper26.sanityCheck()) { addressHelper26.create(); } var addressHelper27 = new AddressHelper({prefix: 'nopostcodesoilOrder2', type: 'addresshelper', showPostcode: false}); if (addressHelper27.sanityCheck()) { addressHelper27.create(); } }); </script> </head> <body> Normal behaviour:<br /> <div id="nopostcodesoilOrder1_addresshelper"></div><br /> Hiding the postcode<br /> <div id="nopostcodesoilOrder2_addresshelper"></div><br /> </body> </html>