TerraPages Address Helper

HotLocality is a free-form version of AddressHelper allowing a single Input Field autocomplete AddressHelper. Some of the examples below will demonstrate the ease of integration and vast flexibility.

The previous version of HotLocality used two different display types: Floating and Inline. 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 add an AddressHelper or HotLocality to any pre-existing Input Fields. An example can be found here.

Adding HotLocality to a page

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

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 repituar 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 HotLocality, these show the flexibility you have when defining your HotLocality.

Simple
Field Name
Field Id
Prefix & ID
Delay
10 Results
Wrapper Style
Style & Class
Suggestion Styles
Display Element
Geocode & Display (Separate)
Geocode & Display (Single)
Action On Result
Data Access
No Suggestion
Postcode
Auto Search
Input Field Size

Example
Source

Example 1 - Smallest amount of code for a HotLocality «Back to index

This example shows the smallest extend to which an HotLocality can be added to a website. This is an unformatted version but shows just how small the footprint can be.

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

Example 1 - Smallest amount of code for a HotLocality «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().create();

	  	});
	</script>
</head>
<body>
	<div id="hotlocality"></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), HotLocality will look for and populate the DIV.

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 HotLocalities 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'.

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 fieldHL = new AddressHelper({
						  id:'fieldHL', 
						  prefix: 'sushiStore'
					       });
		
		if (fieldHL.sanityCheck()){
			fieldHL.create();
		}

	  	});
	</script>
</head>
<body>
	<div id="sushiStore_freeFormAddress"></div>
</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 HotLocality into a pre-existing website where Input Fields have already been defined. As you can see from the source code, the field has an ID corresponding to the name of the HotLocality field (freeFormAddress). This can be overwritten in the options of the field thus easily 'connecting' your HotLocality to your pre-existing Input Fields.

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 advancedHL = new AddressHelper({ id:'advancedFieldHL' });
		
			advancedHL.get('fields').freeFormAddress.set({elementId: 'advancedFormId'});
		
			if (advancedHL.sanityCheck()){advancedHL.create();}

	  	});
	</script>
</head>
<body>
	<input type="text" id="advancedFormId"/>
</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 HotLocality 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'});
								
			if (mudStore1.sanityCheck()){mudStore1.create();}
					
			var mudStore2 = new AddressHelper({prefix: 'clayOrder',	id:'mudStore'});
						
			if (mudStore2.sanityCheck()){mudStore2.create();}

	  	});
	</script>
</head>
<body>
	<div id="loamOrder_mudStore"></div>
	<div id="clayOrder_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});
					
			if (mudStore3.sanityCheck()) { mudStore3.create(); }
						
			var mudStore4 = new AddressHelper({ prefix: 'gravelOrder', delay: 3000 });
						
			if (mudStore4.sanityCheck()) { mudStore4.create(); }

	  	});
	</script>
</head>
<body>
	10 seconds (10000 ms)<div id="sandOrder_hotlocality"></div>
	3 seconds (3000 ms)<div id="gravelOrder_hotlocality"></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});
		
			if (mudStore5.sanityCheck()) { mudStore5.create(); }
			
			var mudStore5a = new AddressHelper({ prefix: 'gypsonOrder', scroll: true, maxReturnValues: 10});
		
			if (mudStore5a.sanityCheck()) { mudStore5a.create(); }
					
			var mudStore6 = new AddressHelper({prefix: 'hardRockOrder',	maxReturnValues: 1});
		
			if (mudStore6.sanityCheck()) { mudStore6.create();}

	  	});
	</script>
</head>
<body>
	10 results<div id="gypsonOrder_freeFormAddress"></div>
	1 result<div id="hardRockOrder_hotlocality"></div>
</body>
</html>

Example
Source

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

Changing the wrapped style of a HotLocality 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 HotLocality 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;'});
			
			if (mudStore7.sanityCheck()) { mudStore7.create();}
						
			var mudStore8 = new AddressHelper({prefix: 'sodosolOrder', styleClass: 'mudStore'});
														
			if (mudStore8.sanityCheck()) { mudStore8.create();}

	  	});
	</script>
</head>
<body>
	<div id="kurosolOrder_freeFormAddress">Kurosol, delivered to your door:</div>
	<div id="sodosolOrder_hotlocality">Sodosol, delivered to your door:</div>
</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 HotLocality, 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'});
		
			mudStore9.get('fields').freeFormAddress.set({style: 'color:white;background-color:red;'});
						
			if (mudStore9.sanityCheck()) { mudStore9.create();}
					
			var mudStore10 = new AddressHelper({prefix: 'vertosolOrder'});
					
			mudStore10.get('fields').freeFormAddress.set({styleClass: 'mudStore'});
						
			if (mudStore10.sanityCheck()) { mudStore10.create();}

	  	});
	</script>
</head>
<body>
	<div id="chromosolOrder_freeFormAddress">Special on Chromosol: </div>
	<div id="vertosolOrder_hotlocality">Special on Vertosol: </div>
</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 HotLocality 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'});
			
			mudStore11.get('fields').freeFormAddress.set({suggestionLoadingStyleClass:'mudStore_loading'});
			
			if (mudStore11.sanityCheck()){mudStore11.create();}
							
			var mudStore12 = new AddressHelper({prefix: 'kandosolOrder'});
							
			mudStore12.get('fields').freeFormAddress.set({suggestionResultsStyleClass: 'mudStore_results'});
			mudStore12.get('fields').freeFormAddress.set({suggestionResultsOddStyleClass: 'mudStore_odd'});
			mudStore12.get('fields').freeFormAddress.set({suggestionResultsEvenStyleClass: 'mudStore_even'});
			mudStore12.get('fields').freeFormAddress.set({suggestionResultsOverStyleClass: 'mudStore_over'});
							
			if (mudStore12.sanityCheck()){mudStore12.create();}

	  	});
	</script>
</head>
<body>
	Change the loading style: <div id="ferrosolOrder_hotlocality"></div>
	Change the results style: <div id="kandosolOrder_hotlocality"></div>
</body>
</html>

Example
Source

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

By changing the 'displayId' attribute you can display the result of the field in the 'displayId' DIV. 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' });
		
			if (mudStore13.sanityCheck()) { mudStore13.create();}

	  	});
	</script>
</head>
<body>
	<div id="result" class="result"></div>
	<div id="calcarosolOrder_hotlocality"></div>
</body>
</html>

Example
Source

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: WADDIKEE ROAD WADDIKEE SA 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


<!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'});
														
			if (mudStore14.sanityCheck()) { mudStore14.create();}
			
			var mudStore14a = new AddressHelper({prefix: 'dermosolOrder2', geocode: true, unsuccessfulGeocode: unsuccessfulGeocodeCallBack});
			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>
	Results: <div id="dermosolOrder_addresshelper"></div>

	<div id="noResult" class="result"></div>
	No geocode: <div id="dermosolOrder2_addresshelper"></div>
</body>
</html>

Example
Source

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


<!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'});
						
			if (mudStore15.sanityCheck()) {mudStore15.create();	}

	  	});
	</script>
</head>
<body>
	<div id=coords class="result"></div>
	<div id="topsoilOrder_hotlocality"></div>
</body>
</html>

Example
Source

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


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

	<!-- 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});
														
			if (mudStore16.sanityCheck()) {mudStore16.create();}
				
			var mudStore17 = new AddressHelper({ prefix: 'oversoilOrder', result: doMyBidding2});
												
			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_hotlocality"></div>
	To Screen: <div id="oversoilOrder_hotlocality"></div>
</body>
</html>

Example
Source

Example 14 - Data Access «Back to index

Access to the current data (data that has been processed by the HotLocality) 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 are four different options for getting the data, 'longitude', 'latitude', 'current' and 'data'. There are five extra details that can be extracted once geocoding is enabled: 'state', 'suburb' and 'streetName', 'streetNumber and 'flatNumber'. These extra details are used only in HotLocality for precise addressing information.

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

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

The 'current' attribute holds the currently top ranked result value for the HotLocality. 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.

The 'state' attribute holds a string of the current highest ranked suggested state, this is the selected address.

The 'suburb' attribute holds a string of the current highest ranked suggested subrub, this is the selected address.

The 'streetName' attribute holds a string of the current highest ranked suggested street name, this is the selected address.

The 'streetNumber' attribute holds a string of the current highest ranked suggested street number, this is the selected address.

The 'flatNumber' attribute holds a string of the current highest ranked suggested flat number, this is the selected address.

Geocode Data:

Current Top Suggestion:

Current Data:

Current and Location Data:

Example 14 - 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
						        						  });
						if (mudStore18.sanityCheck()) {
							mudStore18.create();
						}
						
						var mudStore19 = new AddressHelper({prefix: 'bluesoilOrder', result: doMyBidding4});
						if (mudStore19.sanityCheck()) {
							mudStore19.create();
						}
						
						var mudStore20 = new AddressHelper({prefix: 'greensoilOrder', result: doMyBidding5});
						if (mudStore20.sanityCheck()) {
							mudStore20.create();
						}
						
						var mudStore21 = new AddressHelper({prefix: 'pinksoilOrder'});
				
						mudStore21.get('fields').freeFormAddress.set({result: doMyBidding6, geocodeResult: doMyBidding7});
						
						if (mudStore21.sanityCheck()) {
							mudStore21.create();
						}
						
						function doMyBidding3(){
							alert('ZOMG, your location according to mudStore18 is \n lon: ' + mudStore18.get('longitude') + '\n lat:' + mudStore18.get('latitude'));
							alert('And your street details are:\nsuburb:' + mudStore18.get('suburb') + '\nstate:' + mudStore18.get('state') + '\nstreet name:' + mudStore18.get('streetName') + '\nstreet number:' + mudStore18.get('streetNumber')+ '\nflat number:' + mudStore18.get('flatNumber'));
						}
			
						function doMyBidding4(){
							alert('ZOMG, your location according to mudStore19 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 location according to mudStore21 is \n ' + mudStore21.get('current'));	
						}
			
						function doMyBidding7(){
							alert('ZOMG, your location according to mudStore21 is \n lon: ' + mudStore21.get('longitude') + '\n lat:' + mudStore21.get('latitude'));
						}

	  	});
	</script>
</head>
<body>
	Geocode Data: <div id="redsoilOrder_hotlocality"></div>
	Current Top Suggestion: <div id="bluesoilOrder_hotlocality"></div>
	Current Data: <div id="greensoilOrder_hotlocality"></div>
	Current and Location Data: <div id="pinksoilOrder_hotlocality"></div>
</body>
</html>

Example
Source

Example 15 - 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_hotlocality"></div>
	<div id="nosuggestions" style="display: none; color:red;">No Suggestions!</div>
</body>
</html>

Example
Source

Example 16 - Postcode«Back to index

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

This example shows three HotLocalities the top showing postcodes next address, this is the default behaviour of a HotLocality. 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:

Address: 5000

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 16 - 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 addressHelper23 = new AddressHelper({prefix: 'nopostcodesoilOrder1'});
			
			if (addressHelper23.sanityCheck()) {
				addressHelper23.create();
			}

			var addressHelper24 = new AddressHelper({prefix: 'nopostcodesoilOrder2', showPostcode: false});
			
			if (addressHelper24.sanityCheck()) {
				addressHelper24.create();
			}
			
			var addressHelper25 = new AddressHelper({prefix: 'nopostcodesoilOrder3', result: getMeMyPostcode});
			
			if (addressHelper25.sanityCheck()) {
				addressHelper25.create();
			}

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

Example
Source

Example 17 - 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 17 - 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', autoSearch: false});
	
		if (addressHelper30.sanityCheck()) {
			addressHelper30.create();
		}
	
		var addressHelper31 = new AddressHelper({prefix: 'autoSearch2', autoSearchChar: 'n'});
	
		if (addressHelper31.sanityCheck()) {
			addressHelper31.create();
		}
	</script>
</head>
<body>
	Auto Search Off: <br />
	<div id="autoSearch1_hotlocality"></div><br />
						
	Auto Search Char = 'n'<br />
	<div id="autoSearch2_hotlocality"></div>
</body>
</html>

Example
Source

Example 18 - Input field size«Back to index

This example shows how to set the size of HotLocality input field. The default input size is 60.

Example 18 - Input field size«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 sizeHL = new AddressHelper({
						  prefix:'sizeHL', 
						  size: 100
					       });
		
		if (sizeHL.sanityCheck()){
			sizeHL.create();
	  	});
	</script>
</head>
<body>
	<div id="sizeHL_hotlocality"></div>
</body>
</html>

Floating

Inline

Adding HotLocality to a page

Example Index

Example 1 - Smallest amount of code for a HotLocality «Back to index

Example 1 - Smallest amount of code for a HotLocality «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 geocode option, separate DIV displays «Back to index

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

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

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

Example 13 - Events on results «Back to index

Example 13 - Events on results «Back to index

Example 14 - Data Access «Back to index

Example 14 - Data Access «Back to index

Example 15 - No Suggestions«Back to index

Example 19 - No Suggestions«Back to index

Example 16 - Postcode«Back to index

Example 16 - Postcode«Back to index

Example 17 - Auto Search«Back to index

Example 17 - Auto Search«Back to index

Example 18 - Input field size«Back to index

Example 18 - Input field size«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