Download It – Struts2-AutoCompleter-Example.zip

In Struts 2, the <sx:autocompleter> tag is a combo box that will automatic prompt drop down suggestion lists while user typing on the text box.

This feature is implemented by dojo library, So, make sure you include “struts2-dojo-plugin.jar” as dependency library, put “struts-dojo-tags” tag on top of the page and output its header information via <sx:head />.

For example,

<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<html>
<head>
<sx:head />
</head>
<body>
<sx:autocompleter label="What's your lucky number?" 
name="yourLuckyNumber" autoComplete="false"
list="{'1','12','13','14'}" />

Resulting the following HTML

<html> 
<head> 
<script language="JavaScript" type="text/javascript"> 
    // Dojo configuration
    djConfig = {
        isDebug: false,
        bindEncoding: "UTF-8"
          ,baseRelativePath: "/Struts2Example/struts/dojo/"
          ,baseScriptUri: "/Struts2Example/struts/dojo/"
         ,parseWidgets : false
 
    };
</script> 
<script language="JavaScript" type="text/javascript"
        src="/Struts2Example/struts/dojo/struts_dojo.js"></script> 
 
<script language="JavaScript" type="text/javascript"
        src="/Struts2Example/struts/ajax/dojoRequire.js"></script> 
 
<link rel="stylesheet" href="/Struts2Example/struts/xhtml/styles.css" 
type="text/css"/> 
 
<script language="JavaScript" src="/Struts2Example/struts/utils.js" 
type="text/javascript"></script> 
 
<script language="JavaScript" src="/Struts2Example/struts/xhtml/validation.js" 
type="text/javascript"></script> 
 
<script language="JavaScript" src="/Struts2Example/struts/css_xhtml/validation.js" 
type="text/javascript"></script> 
</head> 
...
<tr>
<td class="tdLabel">
<label for="resultAction_yourLuckyNumber" class="label">
What's your lucky number?:</label></td>
<td>  
<select dojoType="struts:ComboBox" id="resultAction_yourLuckyNumber" 
autoComplete="false" name="yourLuckyNumber" 
keyName="yourLuckyNumberKey" visibleDownArrow="true" >
    <option value="1">1</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
</select>
</td>
</tr>
<script language="JavaScript" type="text/javascript">
djConfig.searchIds.push("resultAction_yourLuckyNumber");</script>

Struts 2 <s:autocompleter> example

A complete example of the <s:autocompleter> tag, generate the drop down suggestion lists while user typing on the corresponding text box.

1. pom.xml

Download the Struts 2 dojo dependency libraries.

pom.xml

//...
    <!-- Struts 2 -->
    <dependency>
      <groupId>org.apache.struts</groupId>
	  <artifactId>struts2-core</artifactId>
	  <version>2.1.8</version>
    </dependency>
 
    <!-- Struts 2 Dojo Ajax Tags -->
    <dependency>
      <groupId>org.apache.struts</groupId>
	  <artifactId>struts2-dojo-plugin</artifactId>
	  <version>2.1.8</version>
    </dependency>
//...

2. Action class

Action class to generate a list of the web frameworks options to the “autocompleter” component.

AutoCompleterAction.java

package com.mkyong.common.action;
 
import java.util.ArrayList;
import java.util.List;
 
import com.opensymphony.xwork2.ActionSupport;
 
public class AutoCompleterAction extends ActionSupport{
 
	private List<String> webframeworks = new ArrayList<String>();
 
	private String yourFavWebFramework;
	private String yourLuckyNumber;
 
	public AutoCompleterAction(){
		webframeworks.add("Spring MVC");
		webframeworks.add("Struts 1.x");
		webframeworks.add("Struts 2.x");
		webframeworks.add("JavaServer Faces (JSF)");
		webframeworks.add("Google Web Toolkit (GWT)");
		webframeworks.add("Apache Wicket");
		webframeworks.add("Apache Click");
		webframeworks.add("Apache Cocoon");
		webframeworks.add("JBoss Seam");
		webframeworks.add("Stripes");
		webframeworks.add("Apache Tapestry");
		webframeworks.add("Others");
	}
 
	public String getYourLuckyNumber() {
		return yourLuckyNumber;
	}
 
	public void setYourLuckyNumber(String yourLuckyNumber) {
		this.yourLuckyNumber = yourLuckyNumber;
	}
 
	public String getYourFavWebFramework() {
		return yourFavWebFramework;
	}
 
	public void setYourFavWebFramework(String yourFavWebFramework) {
		this.yourFavWebFramework = yourFavWebFramework;
	}
 
	public List<String> getWebframeworks() {
		return webframeworks;
	}
 
	public void setWebframeworks(List<String> webframeworks) {
		this.webframeworks = webframeworks;
	}
 
	public String display() {
		return NONE;
	}
 
}

3. Result Page

Render the “autocompleter” component via “<s:autocompleter>” tag, and generate the auto drop down suggestion lists via Java list and OGNL.

autocompleter.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
 
<html>
<head>
<sx:head />
</head>
 
<body>
<h1>Struts 2 autocompleter example</h1>
 
<s:form action="resultAction" namespace="/" method="POST" >
 
<sx:autocompleter label="What's your lucky number?" 
name="yourLuckyNumber" autoComplete="false"
list="{'1','12','13','14','21','22','23','24',
'31','32','33','34','41','42','43','44'}" />
 
<sx:autocompleter label="What's your favorite web framework?" 
list="webframeworks" name="yourFavWebFramework" />
 
<s:submit value="submit" name="submit" />
 
</s:form>
 
</body>
</html>

result.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
 
<body>
<h1>Struts 2 autocompleter example</h1>
 
<h4>
   Lucky Number : <s:property value="yourLuckyNumber"/> 
</h4> 
 
<h4>
   Web Appication Frameworks : <s:property value="yourFavWebFramework"/> 
</h4> 
 
</body>
</html>

3. struts.xml

Link it all ~

<?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="autoCompleterAction" 
	class="com.mkyong.common.action.AutoCompleterAction" 
        method="display">
	<result name="none">pages/autocompleter.jsp</result>
  </action>
 
  <action name="resultAction" 
        class="com.mkyong.common.action.AutoCompleterAction" >
	<result name="success">pages/result.jsp</result>
  </action>
</package>
 
</struts>

4. Demo

http://localhost:8080/Struts2Example/autoCompleterAction.action

Struts 2 AutoCompleter example
Struts 2 AutoCompleter example
Here’s another example to show the use of JSON data to provide a list of the select options to the autocompleter component – Struts 2 autocompleter + JSON example.

Reference

  1. Struts 2 autocompleter documentation
  2. Struts 2 ajax and javascript recipes
  3. Struts 2 combo box example
Tags :
Founder of Mkyong.com, love Java and open source stuffs. Follow him on Twitter, or befriend him on Facebook or Google Plus.
Here are some of my recommended Books

Related Posts

Popular Posts