jQuery UI and Address Auto-Completion

DZone 's Guide to

jQuery UI and Address Auto-Completion

Let's take a look at how jQuery UI can help add auto-completion, with the help of a cloud service, to your project, a boon to users no matter where they are.

· Java Zone ·
Free Resource

jQuery UI has a little-known feature that makes interactive auto-completion very easy. In this hands-on tutorial, we put it together with the cloud-based Global Express Entry address auto-complete service from Melissa to smooth over one of the biggest problems in getting users to sign up.

There are many things that users hate having to do on a website, but they all come down to the same thing — they hate having to do work. Of all of the things you can ask a user to do, typing in their name and address probably qualifies as one that involves the most work. How many potential customers give up on a purchase because they find typing in a full address too irksome. Even if they do go through with it, how can you be sure they have done it correctly. Most users aren't expert typists and easily make a mess of their data entry. The cost of trying to ship something to an invalid address is obvious.

The best idea is to provide instant feedback on any data entry field. Don't wait until they have finished the complete form and then nag them about some mistake you could have picked up while the field had the focus. If possible, provide autocompletion so that as they type, their choice is narrowed down to the point where they can simply click to select a data-perfect validated entry.

This is where jQuery UI's autocomplete widget comes into the picture. It makes adding autocomplete to any field that can accept input easy. As an example of using it, let's make an autocomplete feature for an address — the most work you can ask a user to perform.

Provided with the bare minimum of an address, Melissa Global Express Entry will autocomplete and verify an address from anywhere in the world, returning a full address in the standard format accepted in the country concerned. Any address can be converted into the "Latin" alphabet and, to aid delivery services, maps showing the latitude and longitude based on Google Maps are provided. The onsite demo has examples and lets you experiment freely:

Image title

Obviously, not all countries are verified to the same level, but the coverage includes over 250 countries, with 200 of them at street level or better.

Image title

Address Coverage by Country

Currently, there are 51 countries at address verification level 2, locality, the lowest level represented, including Antarctica, the British Virgin Islands, and Western Sahara. A further 77 countries, including Afghanistan, Barbados, Bolivia, China, and Ghana are at level 3. The most common classification, level 4, includes 77 countries and applies to Japan, India, and many European countries, including Austria, Belgium, and Spain. Level 5, which gets to individual premises is available for 30 countries, notably the USA, Canada, Australia, Russia, France, Germany, Greece, and the UK. 

With regard to mapping, this is provided at the locality level for Hong Kong, at the equivalent of address level 4 for 33 countries, including Australia and most of Europe and at the equivalent of the top level for the USA, Canada, Australia, Czech Republic, Germany, Russia, and Ukraine. 

The cloud service uses a simple REST API and returns XML or JSON. You can also use a desktop version, and there are plugins for Excel and other apps. 

Adding Express Entry 

Here we look at adding it to a simple form.

To try this example, you will need a key, which you can get as part of a free trial. 

First, we need to use jQuery to add autocomplete to a form element. 

<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 src="//code.jquery.com/ui/1.12.1/jquery-ui.js">

Basically, all we are doing here is loading the latest jQuery, jQuery UI, and a basic stylesheet. Update to the latest version of any of these in the future and everything should still work. 

We also need a basic form to input some addresses. As with all examples, the simpler the better:

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

You can see that we have an input text field for the user to start to type the address and a text area ready to display the address. 

The way that the autocomplete widget works is very simple and typical of the way all jQuery UI widgets work. To create the widget, all you do is call its constructor function, which always has the name together with an options object, which specifies how it looks and behaves.

In the case of the autocomplete widget, all we have to do to add the feature to the address text field  is:


Of course, we have to specify options to make it do what we want. 

The most important option is source, which specifies where the autocomplete data comes from. It can be an array of strings or an object containing label-value pairs, or it can be a URL as a string or a function.  

The array of label-value pairs is particularly useful because the label is shown to the user so that they can pick the correct autocomplete, but it is the value that is inserted into the field. This allows you to provide the user with data in one format, but enter it in another. 

The array and strings option is used to provide local autocomplete data the other two are used when the data comes from a server. 

For example:

        source: ["choice1", "choice2","choice3"] 

In this case, when the user types a 'c', the list of three possible autocompletes appears.

Image title

Notice that autocomplete is doing quite a lot of work for you. You don't have to arrange the data or select what is going to appear when the user types. In addition, if the user selects one of the items it is entered into the field.

Using local data in this way has the advantage of being fast, but in most cases, the autocomplete is going to be far more complicated, and you are going to need to contact a remote server. The autocomplete widget allows you to specify a URL that it will get a JSON or JSON-P response. In this case, it doesn't filter the result, so the server needs to use the GET query parameter term to find out what the user is typing. 

In most cases, you are going to want to use the final option, which is to provide a function that gets and processes the data. This function has two parameters — a request object with a single term property that stores what the user has typed so far, and a response callback, which has a single parameter, the data to suggest to the user as string or an array. 

So for example:

        source: function(request,response){
        get the data from the server passing
        request.term as the expression to be

autocompletion ,java ,jquery ,tutorial

Published at DZone with permission of Ian Elliot , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}