
Hi Friends hope everyone knows autocomplete in jquery. It may be difficult for us to implement autocomplete in STRUTS2. Believe me it is as simple as static autocomplete in jquery. I will show you how to implement dynamic (data is coming from oracle) autocomplete in struts2 with the help of JQUERY. JQUERY has many options, method and events, I am not going to explain all these. Please refer jquery autocomplete API document(http://api.jqueryui.com/autocomplete/).
Please flow the below steps to achieve the autocomplete in STRUTS2.
Step 1
Create a dynamic web project using eclipse. I have used java1.7 and below jar files to create struts2 project.
Jar files

Project structure

Step 2
Create tow jsp files
- index.jsp – which will send the request for suggested country
<%@ page contentType=”text/html; charset=UTF-8″ %>
<%@ taglib prefix=”s” uri=”/struts-tags” %>
<html>
<head>
<style type=”text/css”>
body {
font-family: “Trebuchet MS”, “Helvetica”, “Arial”, “Verdana”, “sans-serif”;
font-size: 62.5%;
}
</style>
<meta charset=”utf-8″>
<title>jQuery UI Autocomplete – Remote JSONP datasource</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”>
<script src=”http://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”http://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
<style>
.ui-autocomplete-loading {
background: white url(‘images/ui-anim_basic_16x16.gif’) right center no-repeat;
}
#city { width: 25em; }
</style>
<script type=”text/javascript”>
$(function() {
$( “#country”).autocomplete({
// alert(“hi”);
source: function( request, response ) {
// alert(“hi”+request.term);
$.ajax({
url: “http://localhost:7001/StrutsAutocomplete/getcountry”,
dataType: “json”,
data: {
name_startsWith: request.term
},
success: function( data ) {
// alert(“”+data);
response( $.map( data.state, function( item ) {
return {
label: item,
value: item
};
}));
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(‘error – ‘ +errorThrown);
//console.log(‘error’, textStatus, errorThrown);
}
});
},
minLength: 2
});
});
</script>
</head>
<body>
<h1>Struts 2 Autocomplete using jquery and oracle</h1>
<s:form action=”success”>
<s:textfield name=”country” label=”Country Name” id=”country”/>
</s:form>
</body>
</html>
- country.jsp – which will send the JSON response with list of countries.
<%@page import=”java.util.List,org.codehaus.jackson.map.ObjectMapper”%>
<%@page import=”org.codehaus.jackson.JsonGenerationException”%>
<%
ObjectMapper mapper = new ObjectMapper();
List countryList=(List) request.getAttribute(“countyList”);
//System.out.println(“length”+countryList.size());
out.println(“{“);
out.println(“\”state\”:”);
try{
out.println(mapper.writeValueAsString(countryList));
}
catch (JsonGenerationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.println(“}”);
%>
Note- country.jsp do not have any html tag
Step 3
Create two action class – AutoCompleteAction.java and CountryAction.java.
Create one DAO class – CountryDAO.java
Step 1, step 2 and step 3 is very simple, we have just created the STRUTS2 project.
Note – we have used Jackson mapper to make JSON output file.
Step 4
Create a table and insert some country name. check db.sql.
db.sql
drop table country;
create table country(countryname varchar2(20),countrycode varchar2(5));
insert into country(countryname,countrycode) values(‘Afghanistan’,’93’);
insert into country(countryname,countrycode) values(‘Albania’,’355′);
insert into country(countryname,countrycode) values(‘Algeria’,’213′);
insert into country(countryname,countrycode) values(‘American Samoa’,’1684′);
insert into country(countryname,countrycode) values(‘Andorra’,’376′);
insert into country(countryname,countrycode) values(‘Angola’,’244′);
insert into country(countryname,countrycode) values(‘Anguilla’,’1264′);
insert into country(countryname,countrycode) values(‘Antarctica’,’672′);
insert into country(countryname,countrycode) values(‘India’,’91’);
insert into country(countryname,countrycode) values(‘ndonesia’,’92’);
commit;
Step 5
Run the project http://localhost:7001/StrutsAutocomplete/autocomplete
Note – check your struts.xml for your action name.
Struts.xml
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE struts PUBLIC
“-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
“http://struts.apache.org/dtds/struts-2.0.dtd”>
<struts>
<constant name=”struts.devMode” value=”true” />
<package name=”default” namespace=”/” extends=”struts-default”>
<action name=”autocomplete”
class=”com.codewale.example.action.AutoCompleteAction” >
<result name=”success”>/pages/index.jsp</result>
</action>
<action name=”getcountry”
class=”com.codewale.example.action.CountryAction” >
<result name=”country”>/pages/country.jsp</result>
</action>
</package>
</struts>
Step 6
Type al in text box

Hope it is helpful and you will be able to implement in your project.
Hi viral., how can i use autocomplete with key value pair .your code is working well, i just want to select key from div and their value is displayed in textbox ..how it possible?
Please use blur method to filter the key.