JQuery UI Autocomplete widget with customize JSON data and Spring MVC

One of my favorite newly added widget in jQuery UI 1.8, is Autocomplete. However, it took me a long time to figure it out how to use customized JSON data. So I wrote this as supplementary for you to use your own format JSON data.

The Default JSON Data Format

The Autocomplete widget will looking for an Array of object with label, value property pair, for example, data from jQury UI's remote datasource example.

[ { "id": "Dromas ardeola", "label": "Crab-Plover", "value": "Crab-Plover" }, { "id": "Larus sabini", "label": "Sabine`s Gull", "value": "Sabine`s Gull" }, { "id": "Vanellus gregarius", "label": "Sociable Lapwing", "value": "Sociable Lapwing" }, { "id": "Oenanthe isabellina", "label": "Isabelline Wheatear", "value": "Isabelline Wheatear" } ]

Customized JSON Data

But my country name JSON data looks like this:

 {"countries":[{"name":"Australia","id":14},{"name":"Austria","id":15},{"name":"Guinea-bissau","id":96},{"name":"Macau","id":133},{"name":"Mauritania","id":143},{"name":"Mauritius","id":144},{"name":"Nauru","id":157},{"name":"Palau","id":172},{"name":"Saudi Arabia","id":197},{"name":"Tokelau","id":224}]}

In order to adapt our country names' for auto complete widget, we need to process it at first in "source" callback function:

source: function(request, response) {
  $.ajax({
   url: "countries/",//request url
   dataType: "json",
   data: {
                term: request.term //this will enable countires?term=au
               
            },
   success: function(data) {
    response($.map(data.countries, function(item) {
     return {
      label: item.name,
      value: item.name
     }
    }))
   }
  })
 },

The Complete Example

            Country: