Spring MVC + jQuery Autocomplete example

jquery autocomplete

In this tutorial, we show you how to integrate jQuery autocomplete plugin with Spring MVC.

Tools and Libraries used :

  1. Spring MVC 3.2
  2. jQuery autocomplete plugin – github
  3. Maven 3
  4. Eclipse IDE

Review the tutorial’s flows :

  1. An HTML page, with a textbox.
  2. If the user is tying on the textbox, it will fire an Ajax request (via autocomplete plugin) to Spring controller.
  3. Spring process the user input and return the search result (in JSON format).
  4. The “autocomplete plugin” process the returned result and display the autocomplete suggestion box. See figure above.

1. Project Directory

Review the final project directory structure, a standard Maven project.


2. Project Dependencies

Declares Spring, JSTL and Jackson(JSON result).

		<!-- jstl -->
		<!-- Spring Core -->
		<!-- need this for @Configuration -->
		<!-- Jackson -->

3. Spring MVC – Data Provider

A Spring controller, if user issue a “/getTags” request, Spring will filter out the result with user input and return it in JSON format.

package com.mkyong.web.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.mkyong.web.domain.Tag;
public class MainController {
	List<Tag> data = new ArrayList<Tag>();
	MainController() {
		// init data for testing
		data.add(new Tag(1, "ruby"));
		data.add(new Tag(2, "rails"));
		data.add(new Tag(3, "c / c++"));
		data.add(new Tag(4, ".net"));
		data.add(new Tag(5, "python"));
		data.add(new Tag(6, "java"));
		data.add(new Tag(7, "javascript"));
		data.add(new Tag(8, "jscript"));
	@RequestMapping(value = "/", method = RequestMethod.GET)
	public ModelAndView getPages() {
		ModelAndView model = new ModelAndView("example");
		return model;
	@RequestMapping(value = "/getTags", method = RequestMethod.GET)
	public @ResponseBody
	List<Tag> getTags(@RequestParam String tagName) {
		return simulateSearchResult(tagName);
	private List<Tag> simulateSearchResult(String tagName) {
		List<Tag> result = new ArrayList<Tag>();
		// iterate a list and filter by tagName
		for (Tag tag : data) {
			if (tag.getTagName().contains(tagName)) {
		return result;
package com.mkyong.web.domain;
public class Tag {
	public int id;
	public String tagName;
	//getter and setter methods
	public Tag(int id, String tagName) {
		this.id = id;
		this.tagName = tagName;
mvc-dispatcher-servlet.xml – Map the resources folder.
<beans xmlns="http://www.springframework.org/schema/beans"
	<context:component-scan base-package="com.mkyong" />
		<property name="prefix">
		<property name="suffix">
	<mvc:resources mapping="/resources/**" location="/resources/" />
	<mvc:annotation-driven />

4. jQuery Automplete Plugin

The JSP page below should be self-explanatory.

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script src="<c:url value="/resources/core/jquery.1.10.2.min.js" />"></script>
<script src="<c:url value="/resources/core/jquery.autocomplete.min.js" />"></script>
<link href="<c:url value="/resources/core/main.css" />" rel="stylesheet">
  <h2>Spring MVC + jQuery + Autocomplete example</h2>
	<input type="text"  id="w-input-search" value="">
	  <button id="button-id" type="button">Search</button>
  $(document).ready(function() {
		serviceUrl: '${pageContext.request.contextPath}/getTags',
		paramName: "tagName",
		delimiter: ",",
	   transformResult: function(response) {
		return {      	
		  //must convert json to javascript object before process
		  suggestions: $.map($.parseJSON(response), function(item) {
		      return { value: item.tagName, data: item.id };

#1. The autocomplete plugin will generate the suggestions list with following HTML tags.

<div class="autocomplete-suggestions">
    <div class="autocomplete-suggestion autocomplete-selected">...</div>
    <div class="autocomplete-suggestion">...</div>
    <div class="autocomplete-suggestion">...</div>

So, you need to style it, for example :

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden; font-size:22px}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }

#2. Fro this “autocomplete plugin”, the response from the server must be a JSON formatted JavaScript object like this :

    suggestions: [
        { value: "Java",        data: "1001" },
        { value: "JavaScript",  data: "1002" },
        { value: "Ruby",        data: "1003" }

#3. Review the following Ajax request

	serviceUrl: '${pageContext.request.contextPath}/getTags',
	paramName: "tagName", // ?tagName='user input'
	delimiter: ",",
	transformResult: function(response) {
	   return {
	      suggestions: $.map($.parseJSON(response), function(item) {     
		 return { value: item.tagName, data: item.id };
  1. serviceUrl – Server side URL or callback function that returns the JSON data.
  2. paramName – In this case, it will generate getTags?tagName=user input. Default is ?query=user input.
  3. delimiter – For multiple suggestions.
  4. $.parseJSON (response) – Java will return JSON formatted data, so, you need to convert it to a JavaScript object.

5. Demo

Start and access “http://localhost:8080/SpringMvcExample/“.

Type “java

jquery autocomplete

Type “r

jquery autocomplete

Download Source Code


  1. jQuery autocomplete plugin
  2. Create a Simple Autocomplete With HTML5 & jQuery
  3. 35+ Best Ajax jQuery Autocomplete Tutorial & Plugin with Examples
  4. jQuery $.parseJSON example
  5. jQuery $.map() example
  6. jQuery $.each() example
  7. Wikipedia : JSON
Tags :

About the Author

Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.


  • venkatesh

    very nice tutorial. Took less than 5 mins to implements in an existing project.

  • Adrien

    Very nice article. Thank you so much!

  • http://www.mballem.com Marcio

    I like to work with Spring MVC, and jQuery Ajax is a good partner for it.
    Thank you!

  • Rajesh

    if we are using jquery in it ,we can use token input for the same output,,


    why to use this tough approach????

  • Gnudark

    Very nice article. Thank you so much! In your opinion, jQuery (pure implementation) wins primefaces implementation?