Spring 3 MVC – Autocomplete with JQuery & JSON example

by · May 29, 2012

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.

  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 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.

springmvc-autocomplete-project-structure

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

package net.viralpatel.spring.autocomplete;

import java.util.ArrayList;
import java.util.List;
import java.util.StringTokenizer;
 
public class DummyDB {
    private List<String> countries;
    private List<String> tags;
    
    public DummyDB() {

    	String data = "Afghanistan,	Albania, Algeria, Andorra, Angola, Antigua & Deps,"+ 
    			"United Kingdom,United States,Uruguay,Uzbekistan,Vanuatu,Vatican City,Venezuela,Vietnam,Yemen,Zambia,Zimbabwe";

    	countries = new ArrayList<String>();
        StringTokenizer st = new StringTokenizer(data, ",");
        
        //Parse the country CSV list and set as Array
        while(st.hasMoreTokens()) {
            countries.add(st.nextToken().trim());
        }

        String strTags = "SharePoint, Spring, Struts, Java, JQuery, ASP, PHP, JavaScript, MySQL, ASP, .NET";
        tags = new ArrayList<String>();
        StringTokenizer st2 = new StringTokenizer(strTags, ",");
        
        //Parse the tags CSV list and set as Array
        while(st2.hasMoreTokens()) {
            tags.add(st2.nextToken().trim());
        }
    
    }
 
    public List<String> getCountryList(String query) {
            	
    	String country = null;
        query = query.toLowerCase();
        List<String> matched = new ArrayList<String>();
        for(int i=0; i < countries.size(); i++) {
            country = countries.get(i).toLowerCase();
            if(country.startsWith(query)) {
                matched.add(countries.get(i));
            }
        }
        return matched;
    }

    public List<String> getTechList(String query) {
        String country = null;
        query = query.toLowerCase();
        List<String> matched = new ArrayList<String>();
        for(int i=0; i < tags.size(); i++) {
            country = tags.get(i).toLowerCase();
            if(country.startsWith(query)) {
                matched.add(tags.get(i));
            }
        }
        return matched;
    }
}

Code language: Java (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.

UserController.java

package net.viralpatel.spring.autocomplete;

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;

@Controller
public class UserController {

	private static DummyDB dummyDB = new DummyDB();

	@RequestMapping(value = "/index", method = RequestMethod.GET)
	public ModelAndView index() {

		User userForm = new User();

		return new ModelAndView("user", "userForm", userForm);
	}

	@RequestMapping(value = "/get_country_list", 
					method = RequestMethod.GET, 
					headers="Accept=*/*")
	public @ResponseBody List<String> getCountryList(@RequestParam("term") String query) {
		List<String> countryList = dummyDB.getCountryList(query);
		
		return countryList;
	}

	@RequestMapping(value = "/get_tech_list", 
					method = RequestMethod.GET, 
					headers="Accept=*/*")
	public @ResponseBody List<String> getTechList(@RequestParam("term") String query) {
		List<String> countryList = dummyDB.getTechList(query);
		
		return countryList;
	}
}

Code language: Java (java)

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

<?xml  version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
		
	
	<context:component-scan base-package="net.viralpatel.spring.autocomplete" />	

	<mvc:annotation-driven />


	<bean id="jspViewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
</beans>

Code language: HTML, XML (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

package net.viralpatel.spring.autocomplete;

public class User {
	
	private String name;
	private String country;
	private String technologies;

	//Getter and Setter methods
}

Code language: Java (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

<jsp:forward page="index.html"></jsp:forward>
Code language: HTML, XML (xml)

File: /WebContent/WEB-INF/jsp/user.jsp

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
	<title>Spring MVC Autocomplete with JQuery & JSON example</title>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" 
		src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

</head>
<body>

<h2>Spring MVC Autocomplete with JQuery & JSON example</h2>
<form:form method="post" action="save.html" modelAttribute="userForm">
<table>
	<tr>
		<th>Name</th>
		<td><form:input path="name" /></td>
	</tr>
	<tr>
		<th>Country</th>
		<td><form:input path="country" id="country" /></td>
	</tr>
	<tr>
		<th>Technologies</th>
		<td><form:input path="technologies" id="technologies" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="submit" value="Save" />
			<input type="reset" value="Reset" />
		</td>
	</tr>
</table>	
<br />
	
</form:form>

<script type="text/javascript">
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

$(document).ready(function() {

	$( "#country" ).autocomplete({
		source: '${pageContext. request. contextPath}/get_country_list.html'
	});
	
	$( "#technologies").autocomplete({
	    source: function (request, response) {
	        $.getJSON("${pageContext. request. contextPath}/get_tech_list.html", {
	            term: extractLast(request.term)
	        }, response);
	    },
	    search: function () {
	        // custom minLength
	        var term = extractLast(this.value);
	        if (term.length < 1) {
	            return false;
	        }
	    },
	    focus: function () {
	        // prevent value inserted on focus
	        return false;
	    },
	    select: function (event, ui) {
	        var terms = split(this.value);
	        // remove the current input
	        terms.pop();
	        // add the selected item
	        terms.push(ui.item.value);
	        // add placeholder to get the comma-and-space at the end
	        terms.push("");
	        this.value = terms.join(", ");
	        return false;
	    }
	});
	
});
</script>

</body>
</html>

Code language: HTML, XML (xml)

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)

springmvc-autocomplete-example
springmvc-autocomplete-multi-value

Download Source Code

SpringMVC_Autocomplete.zip (4.2 MB)

Get our Articles via Email. Enter your email address.

Tags:

You may also like...

68 Comments

  1. Mark says:
    28 June, 2012, 7:38  

    Great job. Only I have one slight problem. Not wanting to use JQuery UI just for one widget, and really don’t like JQuery UI. How can you use all the same code as you have, but a different AutoComplete widget?

    Reply
  2. arat says:
    28 June, 2012, 15:31  

    Appreciate it. good example

    Reply
  3. Nikhil says:
    4 July, 2012, 17:41  

    Thanks

    Reply
  4. Sundar says:
    11 July, 2012, 15:14  

    i had a doubt in the count text box you are showing the list countries starts with ” i ” but in the string data doesn’t have those name which starts with ” i “

    Reply
    • lakshman says:
      31 December, 2012, 11:35  

      see carefully the DummyDB.java file…String data contains all the country names and it also contains names starting with ‘i’….

      Reply
  5. Eric says:
    12 July, 2012, 2:25  

    Good stuff.

    Reply
  6. Amith says:
    14 July, 2012, 17:18  

    Good one.

    Reply
  7. Sathish Jayapal says:
    16 July, 2012, 16:22  

    Good example and works.
    Only comment is, the jackson jar’s that is in the example screen needed to be updated with two more jar files that was is in the zip file.

    Reply
    • Nilesh says:
      22 July, 2012, 14:13  

      Hi Satish,

      I am getting json back.. But the not getting the dropdown… Can it be bcoz of those remaining 2 jar files?

      Reply
      • correct ans says:
        30 October, 2012, 13:48  

        That correct nilesh you need to add 2 jar that are highlighted.

        Reply
  8. Nilesh says:
    23 July, 2012, 12:35  

    Hi Viral.

    Thanks for such a nicely documented blog. I tried implementing the above feature. I am able to get the json response at client side. But I am not getting the auto-populated drop down list. Any idea?

    Reply
  9. BigCoder says:
    16 August, 2012, 4:13  

    Hey great tutorial! I did everything but I got an error when I tried to run it. Can someone assist please? I get the error below:

    HTTP Status 404 – /SpringMVC_Autocomplete/

    type Status report

    message /SpringMVC_Autocomplete/

    description The requested resource (/SpringMVC_Autocomplete/) is not available.

    Apache Tomcat/6.0.35

    Reply
  10. BigCoder says:
    16 August, 2012, 5:08  

    Update: sorry i forgot to put the index file in the right place…now i get a java error. one problem i noticed is that the project explorer view does not look like your example. I figure the reason is that i am using the lastest eclipse “cocoa” . Please advise, Here the java error…

    HTTP Status 500 –

    type Exception report

    message

    description The server encountered an internal error () that prevented it from fulfilling this request.

    exception

    org.apache.jasper.JasperException: java.lang.IllegalStateException: No WebApplicationContext found: no ContextLoaderListener registered?
    org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:502)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:424)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    root cause

    java.lang.IllegalStateException: No WebApplicationContext found: no ContextLoaderListener registered?
    org.springframework.web.context.support.WebApplicationContextUtils.getRequiredWebApplicationContext(WebApplicationContextUtils.java:84)
    org.springframework.web.servlet.support.RequestContextUtils.getWebApplicationContext(RequestContextUtils.java:81)
    org.springframework.web.servlet.support.RequestContext.initContext(RequestContext.java:219)
    org.springframework.web.servlet.support.JspAwareRequestContext.initContext(JspAwareRequestContext.java:74)
    org.springframework.web.servlet.support.JspAwareRequestContext.(JspAwareRequestContext.java:48)
    org.springframework.web.servlet.tags.RequestContextAwareTag.doStartTag(RequestContextAwareTag.java:76)
    org.apache.jsp.index_jsp._jspx_meth_form_005fform_005f0(index_jsp.java:184)
    org.apache.jsp.index_jsp._jspService(index_jsp.java:95)
    org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:388)
    org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
    org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
    javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
    note The full stack trace of the root cause is available in the Apache Tomcat/6.0.35 logs.

    Reply
    • Vidyasagar Venkatachalam says:
      20 August, 2012, 17:04  

      @BigCoder, It seems Spring is unable to locate your WebApplicationContext XML file. That is what the exception hints you – java.lang.IllegalStateException: No WebApplicationContext found: no ContextLoaderListener registered?

      Please check for the following –
      1. By default, the naming convention of WebApplicationContext XML file is -servlet.xml. for e.g., if “springmvc” were the servlet name then the WebApplicationContext XML should be available in \WEB-INF folder with the name “springmvc-servlet.xml”

      or

      2. If you have named your WebApplicationContext XML file differently, not adhering to the above naming convention then you should specify the location and name of your WebApplicationContext XML in web.xml with a context parameter and a context loader listener to load it. See below for an example –

      contextConfigLocation
      /WEB-INF/

      org.springframework.web.context.ContextLoaderListener

      Hope the above steps will solve your problem.

      Reply
  11. Anny says:
    17 August, 2012, 16:33  

    I m getting the following error:

    No matching handler method found for servlet request: path ‘/json/get_country_list.htm’, method ‘GET’, parameters map[‘term’ -> array[‘j’]]

    My controller consists of:

    package com.seekersworkroom.controller;

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 com.seekersworkroom.DAO.SkillsaddedDAO;

@Controller
public class JsonController {
	private SkillsaddedDAO skillsaddedDAO;

	public void setSkillsaddedDAO(SkillsaddedDAO skillsaddedDAO) {
		this.skillsaddedDAO = skillsaddedDAO;
	}

	@RequestMapping(value = "/get_country_list", method = RequestMethod.GET, headers = "Accept=*/*")
	public @ResponseBody List getCountryList(@RequestParam("term") String query) {
		List countryList = skillsaddedDAO.getCountryList(query);
        System.out.println("country list is"+countryList.size());
		return countryList;
	}
}

My DAO file consits of:

public List getCountryList(String query) {
        
		List countries = hibernateTemplate.find("SELECT skill_name from skillsaddedVO where (disable NOT LIKE 'DISABLE' or disable IS NULL)" );
        String country = null;
        query = query.toLowerCase();
        List matched = new ArrayList();
        for(int i=0; i &lt; countries.size(); i++) {
            country = ((String) countries.get(i)).toLowerCase();
            if(country.startsWith(query)) {
                matched.add((String) countries.get(i));
            }
        }
        return matched;
    }


    Should i need to add something ??? I have added all the jars as in ur zip file..
    please help…

    Reply
    • Vidyasagar Venkatachalam says:
      20 August, 2012, 17:12  

      @Anny, It seems the URL-Controller mappings in your WebApplicationContext XML file is incorrect. Please print the contents of your web.xml and WebApplicationContext XML to help you further.

      Reply
  12. peter rusznak says:
    9 September, 2012, 17:03  

    Dear Patel,

    I always found your tutorials very helpful and beneficial. This one however was quite a disappointment.

    Should you be interested why please drop me an email.

    Reply
    • Viral Patel says:
      9 September, 2012, 18:12  

      Hi Peter, Thanks for the comment. The feedback that my blog visitors give is very important for me. Please feel free to share your inputs at viralpatel.net at gmail dot com.

      Reply
      • Monu says:
        15 October, 2012, 11:26  

        Hi Viral,
        first of all thanx for such a nice explanation.
        In our project we are using tiles framework without annotation,in that case we have to always return ModelAndview Object.due to not using annotation we cannt set responsebody type as List in that case what type of data we should return for server side autocomplete feature??

        Reply
  13. nitin says:
    10 September, 2012, 18:55  

    Hi,

    i am using autocompleter tag with struts2 , tiles framework and i want to change second autocompleter combo value based on first autocompleter combo list selection.

    can you please, how it will done struts-dojo-tag. tell me the whatever the changes required in java script.

    Reply
  14. Pallavi says:
    1 October, 2012, 11:17  

    Hi Viral,
    After downloading and configuring app in eclipse+tomcat only index.jsp is coming fine. None of the actions working fine.
    Anything m missing?

    Thanks.

    Reply
  15. Gangadhar says:
    6 October, 2012, 20:43  

    By using autocomplete it works fine in IE browser but in Mozilla and Chrome there is a space between the textbox and the autocomplete list…… How to remove that space……

    Reply
  16. Pawan Kumar says:
    8 October, 2012, 13:50  

    good viral!!!!!!!

    Reply
  17. savika says:
    10 October, 2012, 12:09  

    Hi
    I have done everything as you have explained still getting 404 error
    “The requested resource (/SpringAutocomplete/index.html) is not available.”
    can you please help

    Reply
  18. John Q Citizen says:
    16 October, 2012, 18:22  

    Nice tutorial … although when I run this in Tomcat I get a “406” error for every http://…/get_country_list.html?term=XXX call. So there’s no autocompletion in the form. I’d better double-check that I have copied the setup correctly …

    Reply
    • John Q Citizen says:
      17 October, 2012, 5:41  

      Found it: I forgot to include the jackson-core-asl and jackson-mapper libraries. Now the tutorial works as expected.

      Reply
  19. Mike says:
    9 November, 2012, 19:25  

    I get a 404 error
    HTTP Status 404 –
    type Status report
    message
    descriptionThe requested resource () is not available.
    GlassFish Server Open Source Edition 3.1.1

    PLEASE HELP!

    Reply
  20. Sandy says:
    12 November, 2012, 22:59  

    Hi Viral,
    Can you tell me what is ‘term’ in the below mentioned line

    public @ResponseBody List&lt;String&gt; getCountryList(@RequestParam(&quot;term&quot;) String query) {

    Reply
  21. tt says:
    19 November, 2012, 11:17  

    For the country input field, where do you define the “term” parameter? I guess that I echo the same question asked by Sandy.

    Reply
  22. kostas says:
    8 December, 2012, 21:35  

    hello i follow the tutorial everything ok but the dropdown list doesnt show up? anybody that solved this issue?

    Reply
  23. lakshman says:
    31 December, 2012, 11:40  

    not even i made single changes and works fantastic…thanks for such tutorails..go bless..

    Reply
  24. sivaram says:
    3 January, 2013, 17:25  

    If you enter a letter into an amount field, accidentally or intentionally, when you leave the field the letter will be replaced by 0.00. If not removed this will be what you submit.

    The amount field can be found throughout the site on the transaction screen, reports and search screens.

    Reply
  25. sivaram says:
    3 January, 2013, 17:28  

    provide logic using the spring mvc ,hibernate.if end user enter the non neumeric value then need to set the default value like 0.00(amount field)

    Reply
  26. Everett Zhou says:
    7 January, 2013, 21:52  

    It is a great tutorial. I made it work on IE immediately. But it does not work on Firefox. Neither Country nor Technologies has pop-up windows to display the possible choices as it does on IE. I check that the Block pop-up window is NOT checked. For those who made it work, does it work on Firefox?

    Reply
  27. sharad verma says:
    8 January, 2013, 7:14  

    it is great tutorial.

    Reply
  28. Sripati Das says:
    19 January, 2013, 7:44  

    It really helped me to configure json in spring 3.0. Big thank Viral :)

    Reply
  29. Gayan says:
    9 March, 2013, 22:51  

    error with save data in order to view JSON Object.

    please help me, to be run …

    Thanks.

    Reply
  30. Nibedita says:
    27 March, 2013, 17:34  

    I am getting the below error after doing all the steps as mentioned.
    java.lang.IllegalStateException: Mode mappings conflict between method and type level: [/get_search_list] versus [VIEW]
    Note: I have used my existing controller and there I have used type level mode as view for @RequestMapping.
    Please suggest what change I need to do to make it run.
    Thanks.

    Reply
  31. Pankaj says:
    2 April, 2013, 9:15  

    How to implement same with DB tables.

    Reply
  32. Tuzoro says:
    20 April, 2013, 20:24  

    thanks for share !

    Reply
  33. Anand M.B says:
    15 May, 2013, 20:28  

    dear Viral,
    i need some help from you
    we are small team and new for Java base web application development.
    now we have one web vase financial application project have to develop in Java.
    i need help for selecting MVC technology
    like JSF+hibernet+spring+EJB and Jsper report for report, Jboss as AS etc
    please guide me which combination is best
    with regards and thanks
    Anand

    Reply
  34. kalyan says:
    24 May, 2013, 11:02  

    nice stuff:)

    Reply
  35. Sanjay says:
    28 May, 2013, 12:17  

    Thanks dude…works very well…just what I was looking for!

    Reply
  36. chandhu says:
    2 June, 2013, 12:51  

    I am getting following error could you help me

    java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name ‘country’ available as request attribute
    i am new to spring

    Reply
  37. Karthik says:
    13 June, 2013, 14:44  

    Hi, I am getting the below exception. I have checked everything fine. Kindly help.

    Jun 13, 2013 2:34:24 PM org.springframework.web.servlet.DispatcherServlet noHandlerFound
    WARNING: No mapping found for HTTP request with URI [/Spring3MVC_Multiple_Row_Submit/save.html] in DispatcherServlet with name ‘spring’

    Thanks,
    Karthik.

    Reply
  38. Nandhu says:
    1 July, 2013, 16:28  

    Hi,
    Iam getting following error.please kindly help me out of this

    WARNING: No mapping found for HTTP request with URI [/Spring3MVC_Multiple_Row_Submit/index.html] in DispatcherServlet with name ‘spring’

    Reply
  39. Khanh says:
    4 July, 2013, 14:09  

    Hi Viral,

    I base on your source code and developed autocomplete spring and json get list country from database mysql.

    Dao Class:

    @Autowired
	private SessionFactory sessionFactory;

	@SuppressWarnings("unchecked")
	public List<String> getCountryList(String query) {
		List<String> countries = new ArrayList<String>();
		Query queryList = sessionFactory.getCurrentSession().createQuery("FROM User u WHERE u.country LIKE '%"+query+"%'");
		countries = queryList.list();

//		String country = null;
		query = query.toLowerCase();
//		List<String> matched = new ArrayList<String>();
//		for(int i=0; i < countries.size(); i++) {
//			country = countries.get(i).toLowerCase();
//			if(country.startsWith(query)) {
//				matched.add(countries.get(i));
//			}
//		}
		return countries;
	}

    My Controller

    @Autowired
	private UserService userService;

	@RequestMapping(value = "/index", method = RequestMethod.GET)
	public ModelAndView index() {
		User userForm = new User();
		return new ModelAndView("user", "userForm", userForm);
	}

	@RequestMapping(value = "/get_country_list", method = RequestMethod.GET, headers="Accept=*/*")
	public @ResponseBody List<String> getCountryList(@RequestParam("term") String query) {
		List<String> countryList = userService.getCountryList(query);
		return countryList;
	}

    And user.jsp

    <body>

<h2>Spring MVC Autocomplete with JQuery &amp; JSON example</h2>
<form:form method="post" action="save.html" modelAttribute="userForm">
<table>
	<tr>
		<th>Country</th>
		<td><form:input path="country" id="country" /></td>
	</tr>

	<tr>
		<td colspan="2">
			<input type="submit" value="Save" />
			<input type="reset" value="Reset" />
		</td>
	</tr>
</table>
<br />
</form:form>

<script type="text/javascript">
function split(val) {
    return val.split(/,\s*/);
}
function extractLast(term) {
    return split(term).pop();
}

$(document).ready(function() {
	$( "#country").autocomplete({
	    source: function (request, response) {
	        $.getJSON("${pageContext. request. contextPath}/get_country_list.html", {
	            term: extractLast(request.term)
	        }, response);
	    },
	    search: function () {
	        // custom minLength
	        var term = extractLast(this.value);
	        if (term.length < 1) {
	            return false;
	        }
	    },
	    focus: function () {
	        // prevent value inserted on focus
	        return false;
	    },
	    select: function (event, ui) {
	        var terms = split(this.value);
	        // remove the current input
	        terms.pop();
	        // add the selected item
	        terms.push(ui.item.value);
	        // add placeholder to get the comma-and-space at the end
	        terms.push("");
	        this.value = terms.join(", ");
	        return false;
	    }
	});

});
</script>

</body>

    I have run successful but when I input ‘India’ textbox, it is not display list country from databse

    Reply
    • Khanh says:
      4 July, 2013, 14:13  

      If you resolved for me, please inbox for me, my email: [email protected]
      Thanks Viral patel very much.

      Reply
  40. AJ says:
    29 July, 2013, 11:36  

    Hey Viral Patel….
    gr8 tutorials…
    but i have a problem….
    i need to get the data in the autocomplete from the database and not from the dummy database…
    so could you help me with such an example….
    i use mysql…..
    thank you in advance…….

    Reply
  41. Ashish Singh says:
    29 August, 2013, 15:08  

    hi viral, i have one problem in one spring web mvc example:
    i have on bean in dispatcher-servlet.xml file, i inject this bean in one java class (normal java class) then it inject property, but my problem is when i inject this bean into controller class (spring annotation base controller) then i got some exception. the dispatcher-servlet.xml is->

    <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:p="http://www.springframework.org/schema/p"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    
    <context:component-scan base-package="p1" />
    
    <bean id="myNmaeValue" class="p1.UserController ">
        <property name="name" value="Ram" />
    </bean>
    
        
    <bean id="jspViewResolver"
      class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
        <property name="prefix" value="/" />
        <property name="suffix" value=".jsp" />
    </bean>
    
    <mvc:annotation-driven />
     
</beans>

    And the controller is like ->

    package p1;

import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class UserController {
    private String name;
    public void setName(String name) {
        this.name = name;
     }
     @RequestMapping(value = "/pro", method = RequestMethod.GET)
    public String showUserForm(ModelMap model, HttpServletRequest request) {
        User u = new User();
        model.addAttribute(u);
        return "userForm";
    }
}

    Reply
  42. d shanthi kiran naidu says:
    20 September, 2013, 12:46  

    i need multiple values in single text box separated by commas with out using spring

    Reply
  43. Devesh Anand says:
    25 September, 2013, 6:41  

    Hi viral, when i running these application , m getting following exception:- plz rectify the save logic in controller class

    WARNING: No mapping found for HTTP request with URI [/SpringMVCWithJqueryAndJsons/save.html] in DispatcherServlet with name ‘spring’

    Reply
  44. Bob says:
    4 October, 2013, 18:26  

    Good one…

    Reply
  45. quan says:
    5 March, 2014, 8:07  

    download and set up to run
    1) eclipse project and java resource side has error symbols but internal has no error
    2) does now work as it said

    Reply
  46. pankaj says:
    19 March, 2014, 13:57  

    Hi Viral.
    Thanks for such a nicely documented blog. I tried implementing the above feature. I am able to get the json response at client side. But I am not getting the auto-populated drop down list. help me.

    Reply
  47. Rishabh says:
    29 March, 2014, 22:21  

    Hi,
    thanks. I have been able to run this successfully. Just want to know if we can modify this code to include images too in our results. Just like facebook search like when we search a page or a person. So then when we click on the list item , it opens the person’s page or any other page. .
    Thanks

    Reply
  48. atmprakash Sharma says:
    2 May, 2014, 17:24  

    NIce article with example…keep it up :)

    Reply
  49. Sour says:
    4 May, 2014, 20:28  

    Hi Viral,

    Can you give me example code with ajax posting to spring mvc controller with request param.

    Reply
  50. Deepak says:
    12 May, 2014, 16:47  

    Awesome,
    Thanks Viral
    I tried so many example but at the end your examples are working fine.

    Reply
  51. Vijay says:
    23 May, 2014, 18:30  

    Thanks Viral !!!!

    Reply
  52. aj says:
    25 June, 2014, 12:08  

    hi can you explain to me how did the ‘term’ get its value in the controller?

    Reply
  53. asiskumar says:
    23 September, 2014, 15:53  

    wow very nice post.

    Reply
  54. he bing says:
    27 March, 2015, 12:38  

    can u tell me where come from the “query” in the getCountryList()?

    Reply
  55. he bing says:
    27 March, 2015, 12:55  

    would u tell me where come from the ‘query’ ?

    Reply
  56. syed says:
    28 May, 2015, 9:33  

    hey where there’s no ajax and jquery in your coding

    Reply
  57. Rafael says:
    3 January, 2016, 1:51  

    Hi, anyone can explain how terms is got? because on this part of code, they don’t define “terms” even though is a @requestParam, anyway “terms” is defined on technologies javascript code but I dont know why it’s possible to get it by request.param

    $( “#country” ).autocomplete({
    source: ‘${pageContext. request. contextPath}/get_country_list.html’
    });

    Reply
  58. omkar says:
    28 June, 2016, 10:36  

    dear patel

    i want to make categories of product for Example
    Mobile
    Nokia 1100
    Nokia 2600
    Man’s
    exa1
    exa2
    the above type i want to make using spring mvc and mongodb
    i am inserting the Document parent and child type so please suggest me how can i do in jsp page

    Reply
  59. Arpan paik says:
    14 March, 2017, 13:25  

    The value is passing in to the controller but the suggestion is not comming in the jsp page plz help me.When i save the data the exception shown (“HTTP Status 500 – Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: The current request is not a multipart request”).

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow: