Objective
Implement auto complete feature such that when we enter two characters in a text field a drop-down should appear with the remaining content which starts with those characters.
Purpose
Learn how auto complete work with stand alone data or with remote data coming from a distant server in conjunction with Spring MVC framework or a REST call.
Things Needed
Jquery and knowledge of Spring Controllers along with basic understanding of Spring MVC.
Approach
To achieve this we implement city auto complete feature meaning when we enter two characters then all the cities starting with those two characters will appear and so on.
1. Auto complete with Local Data
Most simple form of Auto complete example with stand alone data meaning the data is within the local javascript function. If you copy this code and save it as an html file then you can see it working. Notice that we are using a little older version of JQuery jquery-1.6.2.js The reason is that JQuery-UI must be following up with the changes in latest revisions etc. See the workable demo in cloud foundry http://autocomplete.cloudfoundry.com/ajaxLocal.html
Another point to note is the ajax call
$(function() {$( "#city" )
.autocomplete({source: ["Minneapolis", "Minnehaha"]});
});
we are binding the input text field “city” with the ajax call. The $ here says that its a callback function.
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-1.8.16/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="js/jquery-ui-1.8.16/themes/base/jquery.ui.autocomplete.css" type="text/css" />
<script src="js/jquery-ui-1.8.16/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.widget.js"></script></head>
<script>
$(function() {$( "#city" )
.autocomplete({source: ["Minneapolis", "Minnehaha"]});
});
</script>
<input id="city" />
</html>
2. Auto complete with Data from Local Spring controller
Next form of Auto complete example is with calling a spring controller to provide you dynamic result sets. We created a Spring MVC controller called ZipcodeController.java with request mapping url “/ajaxcitySearchGeneral” here is how the code look. see the workable demo in cloud foundry http://autocomplete.cloudfoundry.com/ajaxToLocalController.html
@Controller
public class ZipcodeController
{
/**
* This method will return same set of zipcodes all the time.
*
* @return Map<String, List<ZipcodeDetails>> represents a JSON name value pair
*/
@RequestMapping(value="/ajaxcitySearchGeneral", method = RequestMethod.GET)
@ResponseBody
public Map<String, List<ZipcodeDetails>> getZipcodes()
{
List<ZipcodeDetails> zipcodes = new ArrayList<ZipcodeDetails>(Arrays.asList(new ZipcodeDetails("55401", "Minneapolis", "MN"), new ZipcodeDetails("1949", "Middleton", "MA"), new ZipcodeDetails("2055", "MINOT", "MA")));
Map<String, List<ZipcodeDetails>> zipMap = new HashMap<String, List<ZipcodeDetails>>();
zipMap.put("zipcodes", zipcodes);
return zipMap;
}
}
Here we are hard coding the data in the spring controller but as you can see we can make a call to persistence layer and get dynamic data. The java script and html for this will look like below code.
<!--
! Spinach Software & Consulting LLC
! Copyright 2011 by Spinach Software & Consulting LLC. All rights reserved.
-->
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-1.8.16/themes/base/jquery-ui.css" type="text/css" />
<script src="js/jquery-ui-1.8.16/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.widget.js"></script>
</head>
<script>
$(function() {
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/ajaxcitySearchGeneral",
dataType: "json",
data: {
maxRows: 6,
startsWith: request.term
},
success: function( data ) {
response( $.map( data.zipcodes, function( item ) {
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="city">Search City: </label>
<input id="city" />
</div>
</div>
</html>
3. Auto complete with Data from Remote REST service
This is by far the most useful one since most of the time the REST service will be on a separate server e.g. in this one we will use a REST service located at http://ziplocator.cloudfoundry.com/rest/startsWithCity/ with two query parameters “startsWith” and “maxRows” so lets say if we are looking for a city that starts with letter “min” then here is the url http://ziplocator.cloudfoundry.com/rest/startsWithCity/?startsWith=min&maxRows=5
Now all we have to do is consume this json result in our html. This is how it looks
<!--
! Spinach Software & Consulting LLC
! Copyright 2011 by Spinach Software & Consulting LLC. All rights reserved.
-->
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-1.8.16/themes/base/jquery-ui.css" type="text/css" />
<script src="js/jquery-ui-1.8.16/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery.ui.widget.js"></script>
</head>
<script>
$(function() {
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function( data ) {
response( $.map( data.zipcodes, function( item ) {
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="city">Search City: </label>
<input id="city" />
</div>
</div>
</html>
See the complete end to end demo of this in cloud foundry here http://autocomplete.cloudfoundry.com/ajaxToRemoteREST.html
Conculsion
Most important concept is to see that JQuery library and JQuery-UI are two separate things. JQuery-UI is specifically made for user interface related stuff and is built on top of JQuery. Latest version of JQuery-UI can be downloaded from http://jqueryui.com/
Also see a complete demo of this functionality at cloud foundry http://autocomplete.cloudfoundry.com/
Note: For the purpose of auto complete we do not need all the libraries that came by default with JQery-UI, so I trimmed it down to what is needed. Please see the complete source code in the end.
