HotLocality Examples

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.

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 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().create(); }); </script> </head> <body> <div id="hotlocality"></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), 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 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 fieldHL = new AddressHelper({ id:'fieldHL', prefix: 'sushiStore' }); if (fieldHL.sanityCheck()){ fieldHL.create(); } }); </script> </head> <body> <div id="sushiStore_freeFormAddress"></div> </body> </html>

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 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 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 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 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'}); 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 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}); 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 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}); if (mudStore5.sanityCheck()) { mudStore5.create(); } var mudStore5a = new AddressHelper({ prefix: 'gypsonOrder', 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 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 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;'}); 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 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 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'}); 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 9 - 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 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' }); if (mudStore13.sanityCheck()) { mudStore13.create();} }); </script> </head> <body> <div id="result" class="result"></div> <div id="calcarosolOrder_hotlocality"></div> </body> </html>

Example 10 - 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 10 - 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'}); 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 11 - 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 11 - 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'}); if (mudStore15.sanityCheck()) {mudStore15.create(); } }); </script> </head> <body> <div id=coords class="result"></div> <div id="topsoilOrder_hotlocality"></div> </body> </html>

Example 12 - 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 12 - 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="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('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 13 - 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 13 - 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 }); 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('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('Your location according to mudStore19 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 location according to mudStore21 is \n ' + mudStore21.get('current')); } function doMyBidding7(){ alert('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 14 - 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 14 - 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_hotlocality"></div> <div id="nosuggestions" style="display: none; color:red;">No Suggestions!</div> </body> </html>

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