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 fields Country and Technologies. 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.
JDK 1.5 above (download)
Tomcat 5.x above or any other container (Glassfish, JBoss, Websphere, Weblogic etc) (download)
Eclipse 3.2.x above (download)
JQuery UI (Autocomplete) (download)
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 select Dynamic Web Project in the New Project wizard screen.
After selecting Dynamic Web Project, press Next.
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 would look like once we finish the tutorial and add all source code.
Now copy all the required JAR files in WebContent > WEB-INF > lib folder. Create this folder if it does not exists.
The Dummy Database
Normally you would 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 package net.viralpatel.springmvc.autocomplete and a Java class file DummyDB.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
The DummyDB.java contains the list of all the countries and technologies in a comma separated string value and a method getCountryList() and getTechList() that will return the list of countries and technologies starting with the string query passed as argument to that method. Thus if we pass “IN” to this method, it will return as all the countries starting with IN.
You may want to change this code and add the database implementation here. Just a simple "SELECT * FROM <table> WHERE country LIKE " query will serve the purpose.
Now we write SpringMVC Controller that returns JSON output for Autocomplete.
The Spring MVC Controller
The spring mvc controller class that will process the request and returns JSON output. For this create a class UserController.java under package net.viralpatel.springmvc.autocomplete.
Note how we used @ResponseBody annotation in methods getCountryList() and getTechList(). Spring MVC converts the return type which in our case is List into JSON data.
Following is the content of spring-servlet.xml file.
File: /WebContent/WEB-INF/spring-servlet.xml
The tag
is required here. This lets Spring to process annotations like @ResponseBody.
The below User.java class is required only to bind a form with JSP. It is not required for this example. But for sake of Spring MVC we are using it.
File: /src/net/viralpatel/springmvc/autocomplete/User.java
The JSP View
Now add JSP file which renders User form. Also we will add index.jsp which redirect to proper request.
File: /WebContent/index.jsp
File: /WebContent/WEB-INF/jsp/user.jsp
Check the above JSP. We have added INPUT fields for Country and Technologies. Also we used $().autocomplete() to enable autocomplete. For country it was straightforward $( "#country" ).autocomplete() but for technologies we did some parsing and splitting. This is because we need multiple technologies in textbox separated by comma.
That’s All Folks
You may want to run the application see the result. I assume you have already configured Tomcat in eclipse. All you need to do:
Open Server view from Windows > Show View > Server. Right click in this view and select New > Server and add your server details.
To run the project, right click on Project name from Project Explorer and select Run as > Run on Server (Shortcut: Alt+Shift+X, R)
Download Source Code
SpringMVC_Autocomplete.zip (4.2 MB)
Related Posts
Tutorial:Create Spring 3 MVC Hibernate 3 Example using Maven in Eclipse
Spring 3 MVC: Themes in Spring-Tutorial with Example
Spring 3 MVC: Internationalization & Localization Tutorial with Example
Spring 3 MVC: Tiles Plugin Tutorial with Example in Eclipse
Spring 3 MVC: Handling Forms in Spring 3.0 MVC
Spring 3 MVC: Create Hello World application in Spring 3.0 MVC
Spring 3 MVC – Introduction to Spring 3 MVC Framework