Dynamic autocomplete using Jquery, Struts2 and oracle

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

<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