Spring 3 MVC-AutoComplete with jquery & JSON example

Previously, the auto-completion function for storing data using XML is similar to the idea in this article.

Let us implement AutoComplete feature in spring MVC application using jquery. autoComplete is a feature you "ll see in almost all good web apps. it allows user to select proper values from a list of items. adding this feature is recommended if the field has multiple (> 20 to 25) values.

Related:AutoComplete in Java/jsp

Our requirement is simple. We will have two fieldsCountryAndTechnologies. Both these fields will have AutoComplete feature so user will be able to select from List of countries and technologies. the country field can have only one value. but the technologies field can have multiple values separated by comma (,).

Things we need

Before we starts with our spring MVC AutoComplete example, we will need few tools.

1. JDK 1.5 above (download)
2. Tomcat 5.x above or any other container (glassfish, JBoss, websphere, WebLogic etc) (download)
3. Eclipse 3.2.x above (download)
4. Jquery UI (AutoComplete) (download)
5. Spring 3.0 MVC jar files :( download). Following are the list of jar files required for this application.
   • Jstl-1.2.jar
   • Org. springframework. asm-3.0.1.RELEASE-A.jar
   • Org. springframework. beans-3.0.1.RELEASE-A.jar
   • Org. springframework. context-3.0.1.RELEASE-A.jar
   • Org. springframework. core-3.0.1.RELEASE-A.jar
   • Org. springframework. expression-3.0.1.RELEASE-A.jar
   • Org. springframework. Web. servlet-3.0.1.RELEASE-A.jar
   • Org. springframework. web-3.0.1.RELEASE-A.jar
   • Commons-logging-1.0.4.jar
   • Commons-beanutils-1.8.0.jar
   • Commons-digester-2.0.jar
   • Jackson-core-asl-1.9.7.jar
   • Jackson-mapper-asl-1.9.7.jar

Note that depending on the current version of spring MVC, the version number of above jar files may change. also note that we need Jackson Mapper and Jackson core jars. this is required for generating JSON from our spring MVC controller.

Getting started

Let us start with our spring 3.0 MVC Based application.
Open eclipse and goto file-> New-> project and selectDynamic Web projectIn the new project wizard screen.

After selecting dynamic web project, pressNext.

Write the name of the project. for example springmvc_autocomplete. once this is done, select the target Runtime Environment (e.g. apache Tomcat v6.0 ). this is to run the project inside eclipse environment. after this press finish.

Once the project is created, you can see its structure in project Explorer. This is how the project structure wocould look like once we finish the tutorial and add all source code.

Now copy all the required jar files inWebcontent> WEB-INF> libFolder. Create this folder if it does not exists.

The dummy Database

Normally you wowould need a database from where you'll fetch values required for autocomplete. But for sake of simplicity of this example we will write a dummydb Java class.

Once the project is created, create a packageNet. viralpatel. springmvc. AutoCompleteAnd a Java class fileDummydb. Java. Dummydb. Java is the class that will simulate the database connection and it will provide the data for our example.

File:/src/NET/viralpatel/springmvc/AutoComplete/dummydb. Java

?

010203040506070809101112131415161718192021222324252627282930313233343536373839404142