Dynamic autocomplete using Jquery, Struts2 and oracle

auto complete
auto complete

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

struts2 auto complete
struts2 auto complete

Project structure

project structure
project structure

Step 2

Create tow jsp files

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

 

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

Struts autocomplete Output
Struts autocomplete Output

Hope it is helpful and you will be able to implement in your project.

 

Download Code

Profile photo of Nirmal Dhara
About Nirmal Dhara 28 Articles
Java Developer

2 Comments

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

Leave a Reply

Your email address will not be published.


*