jQuery UI and Auto-Complete Address Entry
Written by Ian Elliot   
Tuesday, 18 April 2017
Article Index
jQuery UI and Auto-Complete Address Entry
Using the Melissa Data API
Going Global
Page 3 of 3

Program Listing

<!doctype html>

<html>
 <head>
   <title>ExpressFreeForm example</title>
   <link rel="stylesheet" href="//code.jquery.com/
                ui/1.12.1/themes/base/jquery-ui.css">
   <script
          src="https://code.jquery.com/jquery-3.1.1.js"
          integrity= "sha256
          -16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
          crossorigin="anonymous">
   </script>
   <script src="//code.jquery.com/
                ui/1.12.1/jquery-ui.js">
   </script>
   <script type="text/javascript">
    jQuery(function ()
     {
      $('#address').autocomplete(
                 {
                  source: getAddress,
                  minLength: 4,
                  delay: 400,
                  select: function (event, ui) {                             $("#result").val(ui.item.value);
                    return false;
                   } 
                  });

     function getAddress(request, response) {
      var url = "http://expressentry.melissadata.net/";
      url += "jsonp/ExpressFreeForm?callback=?";
      var id ="key";
      var query = {
                    format: "jsonp",
                    id: id,
                    FF: request.term,
                    maxrecords: "30"
                  };

     $.getJSON(url, query)
       .then(
          function (data) {
            var auto = $.map(data.Results,
            function (item) { 
              return  {label:
                    item.Address.AddressLine1 + " " +                         item.Address.City + ", " +
                      item.Address.State + " " +         
                       item.Address.PostalCode,
                       value:
                        item.Address.AddressLine1};     
             });

             response(auto);
          },
          function (data) {   
            handle error
          }
       );
     }
 })


  </script>
 </head>
 <body>
   <form onsubmit="return false;"> 
    Address:
    <input id="address" type="text"              
                style="padding:2px;width:308px;">
    </br></br>
    <textarea cols="40" rows="6" id="result"
      style="padding:2px;width:390px;">
    </textarea>
    </br>
    <button id ="clearbutton">Clear</button>           
  </form>
 </body>
</html>

ZIP Codes & The World

You can easily modify the program to make use of other autocomplete options. Usually all you have to do is modify the URL used in the request and perhaps modify the inputs in the query string. For example, if you want to find an address using a ZIP code the URL changes to:

var url = "http://expressentry.melissadata.net/";
url += "jsonp/ExpressPostalCode?callback=?";

and the query string changes to:

 var query = {   format: "jsonp",
                     id: id,
             postalcode: request.term,
             maxrecords: "30"
            };

You can try this out without any other changes as the data returned is the same.

If you want to change to looking up addresses worldwide then it is almost as easy. You have to change the URL and supply a country code to specify the country being searched  and you also have to modify the handling of the suggested addresses. The possible format of world addresses requires a more general approach and there are fields labeled Address1 though 8 and a single Address field holding a formatted address. If you don't specify a country code then the USA is the default so an alternative way to lookup an address in the USA is to use the URL:

var url = "http://expressentry.melissadata.net/";
url += "jsonp/GlobalExpressFreeForm?callback=?";

and the query string is the same as the original:

 var query = {
               format: "jsonp",
                   id: id,
                   FF: request.term,
           maxrecords: "30"
            };

The success function becomes:

function (data) {
  var auto = $.map(data.Results, function (item) {
              return {label:item.Address.Address};
             });
  response(auto);
}

To find addresses in a particular country, add an ISO country code. For example for a UK address the query string would be:

var query = {
              format: "jsonp",
                  id: id,
             country:"UK",
                  FF: request.term,
          maxrecords: "30"
            };

No other changes are needed.

Saving Time, Saving Effort, Eliminating Mistakes

We have used Express Entry to save user's time and effort - and hopefully retain more users and potential customers than otherwise. Express Entry also avoids the problems so often caused by typing errors when entering addresses.  With increasing automation and reliance on systems that cannot easily respond to "obvious" human error, incorporation data verification is vital and here we have seen how jQuery's autocomplete feature and Melissa Data's Express Entry make it easy for the developer to cope with address data

Melissa Data has a range of data entry APIs to ensure clean data and eliminate duplicate data, see the full range at the Melissa Wiki. 

 

More Information

Melissa Data

Global Express Entry 

APIs

Related Articles

Getting Started with jQuery UI 

 

 

Banner
 

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

 

 

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 

 

id="addressSelected"

<< Prev - Next
Last Updated ( Tuesday, 18 April 2017 )