Struts 2 AJAX Autocomplete dropdown example

I started playing with struts 2.0.14 showcase application and thought of extracting a simple AJAX Autocomplete dropdown example from it.
In this example I am trying to create a autocomplete textbox and when you select one value from this autocomplete drop down the other will populate accordingly.

This post is for developers who are new to Struts 2.

This example uses

- Struts 2.0.14 - Download Struts
- apache-tomcat-6.0.18 - Download Tomcat
- java version "1.6.0_10"
- freemarker template (2.3.8) for the second dropdown.

You can use this example as is or play around with it based on your need.

index.jsp :

This page redirects the request to the demo page where autocomplete text box is diplayed.

  
 <%@ taglib prefix="s" uri="/struts-tags" %>

autocomplete.jsp

This page contains the core of this example, the Struts tags for Autocomplete.

  
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>



AutoComplete




Link two autocompleter elements. When the selected value in 'Autocompleter 1' changes, 
the available values in 'Autocompleter 2' will change also.



  Autocompleter 1 


Autocompleter 2

options.ftl

This is Freemarker template to render the second drop down, which is populated based on selection in first autocomplete drop down.

  
[
<#list options as option>
 ["${option}"],

]

ListingAction.java

This action class is to populate values in the first autocomplete drop down.

  

package ajaxdemo.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class ListingAction extends ActionSupport {
 private List selectList = null;

 public String execute() throws Exception {
  selectList = new ArrayList();
  selectList.add("Fruits");
  selectList.add("Colors");
  return SUCCESS;
 }

 public List getSelectList() {
  return selectList;
 }

 public void setSelectList(List selectList) {
  this.selectList = selectList;
 }

}

DetailAction.java

This is a action class to populate the second autocomplete drop down based on selection value in first drop down.

  
package ajaxdemo.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

public class DetailAction extends ActionSupport {
  private String select;
  private List options = new ArrayList();

  private static final long serialVersionUID = -8481638176160014396L;

  public String execute() throws Exception {
    if ("Fruits".equalsIgnoreCase(select)) {
      options.add("apple");
      options.add("banana");
      options.add("grape");
      options.add("pear");
    } else if ("Colors".equalsIgnoreCase(select)) {
      options.add("red");
      options.add("green");
      options.add("blue");
    }
    return SUCCESS;
  }

  public String getSelect() {
    return select;
  }

  public void setSelect(String select) {
    this.select = select;
  }

  public List getOptions() {
    return options;
  }
}

struts.xml

Struts config file for action mappings.

  



    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
    

   
  
   /autocomplete.jsp
       
       
           /options.ftl

web.xml

The application deployment descriptor.

  

 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
  struts2
  org.apache.struts2.dispatcher.FilterDispatcher
  
 
 
  struts2
  /*
 
 
  index.jsp

Output

Go the URL http://localhost:8080/ajaxdemo/ in your favorite web browser. The page should look like this.

Web application directory Structure
This is how the application war directory structure should look like.

  
ajaxdemo/
ajaxdemo/index.jsp
ajaxdemo/autocomplete.jsp
ajaxdemo/options.ftl
ajaxdemo/WEB-INF/web.xml
ajaxdemo/WEB-INF/classes/struts.xml
ajaxdemo/WEB-INF/classes/ajaxdemo/action/DetailAction.class
ajaxdemo/WEB-INF/classes/ajaxdemo/action/ListingAction.class
ajaxdemo/WEB-INF/lib/*.jar

Here are the list of jar files you need to have in your application WEB-INF/lib dir.

  

antlr-2.7.2.jar
aopalliance-1.0.jar
classworlds-1.1.jar
commons-beanutils-1.7.0.jar
commons-chain-1.1.jar
commons-codec-1.3.jar
commons-collections-2.1.jar
commons-collections-3.1.jar
commons-digester-1.6.jar
commons-digester-1.8.jar
commons-el-1.0.jar
commons-fileupload-1.1.1.jar
commons-io-1.1.jar
commons-lang-2.1.jar
commons-logging-1.0.4.jar
commons-logging-api-1.1.jar
commons-validator-1.3.0.jar
dwr-1.1-beta-3.jar
freemarker-2.3.8.jar
jstl-1.1.0.jar
log4j-1.2.9.jar
myfaces-api-1.1.2.jar
myfaces-impl-1.1.2.jar
ognl-2.6.11.jar
oro-2.0.8.jar
plexus-container-default-1.0-alpha-10.jar
plexus-utils-1.2.jar
sitemesh-2.2.1.jar
spring-beans-2.0.5.jar
spring-context-2.0.5.jar
spring-core-2.0.5.jar
spring-web-2.0.5.jar
struts-core-1.3.5.jar
struts2-codebehind-plugin-2.0.14.jar
struts2-config-browser-plugin-2.0.14.jar
struts2-core-2.0.14.jar
struts2-jsf-plugin-2.0.14.jar
struts2-sitemesh-plugin-2.0.14.jar
struts2-struts1-plugin-2.0.14.jar
struts2-tiles-plugin-2.0.14.jar
tiles-api-2.0.4.jar
tiles-core-2.0.4.jar
tiles-jsp-2.0.4.jar
velocity-1.4.jar
velocity-dep-1.4.jar
velocity-tools-1.1.jar
xml-apis-1.0.b2.jar
xwork-2.0.7.jar

Download ajaxdemo.war here

Struts 2 AJAX Autocomplete dropdown example

Search

Categories

Archive

Blogroll

Free Subscribtion