TerraPages Address Helper

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.

Simple
Field Names
Field Id
Prefix & ID
Delay
10 Results
Wrapper Style
Style & Class
Suggestion Styles
Display Element
Result Display
Geocode & Display (Separate)
Geocode & Display (Single)
Action On Result
Data Access
Change Suggestion Data
Configurable Fields
No Suggestion
Postcode
Auto Tab
Auto Search

Example
Source

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


<!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
Source

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


<!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
Source

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


<!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
Source

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


<!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
Source

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


<!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
Source

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 use the scroll option with "scroll: true" in the creation of your AddressHelper. This tells the AutoComplete to open the suggestion box with a scroll bar 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. The next example illustrates this.

+10 results

1 result

Example 6 - Changing the maxReturnValues option «Back to index

Launch example in a new window


<!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, scroll: true, 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
Source

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


<!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
Source

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


<!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
Source

Example 9 - Changing the input field suggestion class(s) «Back to index

Like the Style of the Input Fields and the wrapper Style, the Suggestion Box Style can be changed for the entire AddressHelper or for each field individually.

Change the loading style:

Change the results style:

Example 9 - Changing the input field suggestion class(s) «Back to index

Launch example in a new window


<!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>

	<!-- Style -->
	<style type="text/css">
		.mudStore_loading {
			background: white url('../../images/loader.gif') right center no-repeat;
		}

		.mudStore_results {
			padding: 0px;
			border: 1px solid black;
			overflow: hidden;
			z-index: 99999;
			background-color: #f5962f;
			color: black;
		}
		
		.mudStore_results ul {
			width: 100%;
			list-style-position: outside;
			list-style: none;
			padding: 0;
			margin: 0;
		}
	
		.mudStore_results li {
			margin: 0px;
			padding: 2px 5px;
			cursor: default;
			display: block;
			/* 
			if width will be 100% horizontal scrollbar will apear 
			when scroll mode will be used
			*/
			/*width: 100%;*/
			font: menu;
			font-size: 11px;
			/* 
			it is very important, if line-height not setted or setted 
			in relative units scroll will be broken in firefox
			*/
			line-height: 16px;
			overflow: hidden;
		}
	
		.mudStore_odd {
			background-color: #a4f2aa;
		}
	
		.mudStore_over {
			font-size:16;
			background-color: #cbd6f5;
			color: black;
		}
	</style>

	<!-- AddressHelper -->
	<script type="text/javascript" src="SERVICE_END_POINT/scripts/addresshelper-packed.js" ></script>

	<script type="text/javascript">
		$(document).ready(function(){
		
		var mudStore11 = new AddressHelper({prefix: 'ferrosolOrder', type: 'addresshelper'});

		for (i in mudStore11.get('fields')) {	
			var f = mudStore11.get('fields')[i];
			f.set({suggestionLoadingStyleClass:'mudStore_loading'});
		}
		
		if (mudStore11.sanityCheck()) { mudStore11.create(); }

		var mudStore12 = new AddressHelper({prefix: 'kandosolOrder', type: 'addresshelper'});

		for (i in mudStore12.get('fields')) {	
			var f = mudStore12.get('fields')[i];
			f.set({suggestionResultsStyleClass: 'mudStore_results'});
			f.set({suggestionResultsOddStyleClass: 'mudStore_odd'});
			f.set({suggestionResultsEvenStyleClass: 'mudStore_even'});
			f.set({suggestionResultsOverStyleClass: 'mudStore_over'});
		}

		if (mudStore12.sanityCheck()) {mudStore12.create();}

	  	});
	</script>
</head>
<body>
	
</body>
</html>

Example
Source

Example 10 - 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 10 - Changing the display element ID «Back to index

Launch example in a new window


<!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
Source

Example 11 - 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 11 - Changing the display element ID per field «Back to index

Launch example in a new window


<!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
Source

Example 12 - 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 12 - Changing the geocode option, separate DIV displays «Back to index

Launch example in a new window



<!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
Source

Example 13 - 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 13 - Changing the geocode option, single DIV display «Back to index

Launch example in a new window


<!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
Source

Example 14 - 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 14 - Events on results «Back to index

Launch example in a new window


<!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('ZOMG, 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
Source

Example 15 - 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 15 - Data Access «Back to index

Launch example in a new window


<!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('ZOMG, your fields GEOCODE suggestion is \n lon: ' + 
				  mudStore18.get('longitude') + '\n lat:' + 
				  mudStore18.get('latitude'));
		}

		function doMyBidding4(){
			alert('ZOMG, your fields CURRENT suggestion is \n ' + 
			      mudStore19.get('current'));
		}

		function doMyBidding5(){

			var data = mudStore20.get('data');
			var output = 'Currnet data : \n';

			for (i in data) {
				output += i + '. ' + data[i] + '\n';
			}

			alert(output);
		}

		function doMyBidding6(){
			alert('ZOMG, your fields GEOCODE suggestion is \n lon: ' + 
			      mudStore21.get('longitude') + '\n lat:' + mudStore21.get('latitude'));
		}

		function doMyBidding7(){
			alert('ZOMG, 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
Source

Example 16 - Change Suggestion Data «Back to index

You can change the suggestion data for each field by specifying the 'data' attribute to the field, as in the below example by setting the data for the states you can easily restrict uses to some states.

Change State data:

Example 16 - Change Suggestion Data «Back to index

Launch example in a new window


<!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 STATES = ['VIC', 'TAS', 'SA', 'NT'];

			var mudStore22 = new AddressHelper({prefix: 'blacksoilOrder', type: 'addresshelper'});
			
			mudStore22.get('fields').state.set({data: STATES, mustMatch: true});
			
			if (mudStore22.sanityCheck()) {
				mudStore22.create();
			}

	  	});
	</script>
</head>
<body>
	Change State data: <div id="blacksoilOrder_addresshelper"></div>
</body>
</html>

Example
Source

Example 17 - 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 17 - Configurable Fields «Back to index

Launch example in a new window


<!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
Source

Example 18 - 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 18 - Select Fields«Back to index

Launch example in a new window


<!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
Source

Example 19 - 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 19 - No Suggestions«Back to index

Launch example in a new window


<!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 Nose, 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
Source

Example 20 - 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

Show the postcode (when one is available)

Example 20 - Postcode«Back to index

Launch example in a new window


<!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();
			}
			
			var addressHelper28 = new AddressHelper({prefix: 'nopostcodesoilOrder3', type: 'addresshelper', result: getMeMyPostcode});
			
			if (addressHelper28.sanityCheck()) {
				addressHelper28.create();
			}

			function getMeMyPostcode(){
				alert(addressHelper28.get('postcode'));
			}
	  	});
	</script>
</head>
<body>
	Normal behaviour:<br />
	<div id="nopostcodesoilOrder1_addresshelper"></div><br />
	
	Hiding the postcode<br />
	<div id="nopostcodesoilOrder2_addresshelper"></div><br />
	
	Show the postcode (when one is available)<br />
	<div id="nopostcodesoilOrder3_addresshelper"></div>
</body>
</html>

Example
Source

Example 21 - Auto Tab«Back to index

AddressHelper can have an Auto Tab feature enabled to automatically tab to the next input field when there is only one result returned from the backend server. This example shows how to switch this feature on.

The next example shows the use of AutoSearch, this option is on by default, but it should be turned off when using the autoTab options.

Example 21 - Auto Tab«Back to index

Launch example in a new window


<!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 addressHelper29 = new AddressHelper({prefix: 'autoTabsoilOrder', type: 'addresshelper', autoTab: true, autoSearch: false});

		if (addressHelper29.sanityCheck()) {
			addressHelper29.create();
		}
	  	});
	</script>
</head>
<body>
	<div id="autoTabsoilOrder_addresshelper"></div>
</body>
</html>

Example
Source

Example 22 - Auto Search«Back to index

Auto Search is a feature where by as soon as the user selected a field the field will search for the letter specified by the autoSearchString (default is 'a').

It is not recommended to use both autoSearch and autoTab on the same AddressHelper instance; reason being if there is a single result autoTab will automatically TAB to the next field and enter the single result in the field, this might continue until the entire AddressHelper is filled in, which would not be a desired user experience.

By default Auto Search is set set to true (on) to turn off Auto Search: autoSearch: false

By default the Auto Search String is 'a', to change: autoSearchString: 'b'

Auto Search Off:

Auto Search String = 'n'

Example 22 - Auto Search«Back to index

Launch example in a new window


<!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">
		var addressHelper30 = new AddressHelper({prefix: 'autoSearch1', type: 'addresshelper', autoSearch: false});
	
		if (addressHelper30.sanityCheck()) {
			addressHelper30.create();
		}
	
		var addressHelper31 = new AddressHelper({prefix: 'autoSearch2', type: 'addresshelper', autoSearchString: 'n'});
	
		if (addressHelper31.sanityCheck()) {
			addressHelper31.create();
		}
	</script>
</head>
<body>
	Auto Search Off: <br />
	<div id="autoSearch1_addresshelper"></div><br />
						
	Auto Search Char = 'n'<br />
	<div id="autoSearch2_addresshelper"></div>
</body>
</html>

Floating

Inline

Popup

Adding AddressHelper to a page

Example Index

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

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

Example 2 - Using Field Names «Back to index

Example 2 - Using Field Names «Back to index

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

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

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

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

Example 5 - Changing the Delay Option «Back to index

Example 5 - Changing the Delay Option «Back to index

Example 6 - Changing the maxReturnValues option «Back to index

Example 6 - Changing the maxReturnValues option «Back to index

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

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

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

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

Example 9 - Changing the input field suggestion class(s) «Back to index

Example 9 - Changing the input field suggestion class(s) «Back to index

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

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

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

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

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

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

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

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

Example 14 - Events on results «Back to index

Example 14 - Events on results «Back to index

Example 15 - Data Access «Back to index

Example 15 - Data Access «Back to index

Example 16 - Change Suggestion Data «Back to index

Example 16 - Change Suggestion Data «Back to index

Example 17 - Configurable Fields «Back to index

Example 17 - Configurable Fields «Back to index

Example 18 - Select Fields «Back to index

Example 18 - Select Fields«Back to index

Example 19 - No Suggestions«Back to index

Example 19 - No Suggestions«Back to index

Example 20 - Postcode«Back to index

Example 20 - Postcode«Back to index

Example 21 - Auto Tab«Back to index

Example 21 - Auto Tab«Back to index

Example 22 - Auto Search«Back to index

Example 22 - Auto Search«Back to index

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

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