Auto Completer Example

In this section, we are going to describe the autocompleter tag. The autocompleter tag always displays a dropdown list with the options that have at least a partial match with entered text in the textbox. If the user clicks on the dropdown button then all options shown in the dropdown list. The autocompleter tag generates two input fields. First is "text", whose name is specified with the "name" attribute and another one is "hidden" whose name is "$(name). Key", where ${name} is the value in the "name" attribute.

The autocompleter tag loads its options asynchronously when the page loads suggested options based on the text entered by you in textbox. If the autoComplete attribute is set to 'true' (By defalut 'false') then it makes suggestions in the textbox.

[Note: When we use the "simple" theme, the autocompleter can be used like the ComboBox. When used on the "ajax" theme, the list can be retrieved from an action.]

Add the following code snippet into the struts.xml file.

<action name="autocompleter" class="net.roseindia.autocompleter">
<result>/pages/autocompleter.jsp</result>
</action>

Create a list in the action class and populate them with various states name of U.S. as shown in the "autocompleter" class.


package net.roseindia;

import com.opensymphony.xwork2.ActionSupport;

import java.util.*;



public class autocompleter extends ActionSupport{

  private List state;

  public String execute() throws Exception{

  state = new ArrayList();

  state.add("Alabama");

  state.add("Alaska");

  state.add("Arizona");

  state.add("Arkansas");

  state.add("California");

  state.add("Colorado");

  state.add("Connecticut");

  state.add("Delaware");

  state.add("District of Columbia");

  state.add("Florida");

  state.add("Georgia");

  state.add("Hawaii");

  state.add("Idaho");

  state.add("Illinois");

  state.add("Indiana");

  state.add("Iowa");  

  state.add("Kansas");  

  state.add("Kentucky");

  state.add("Louisiana");  

  state.add("Maine");  

  state.add("Maryland");

  state.add("Massachusetts");  

  state.add("Michigan");

  state.add("Minnesota");

  state.add("Mississippi");

  state.add("Missouri");

  state.add("Montana");  

  state.add("Nebraska");  

  state.add("Nevada");  

  state.add("New Hampshire");  

  state.add("New Jersey");

  state.add("New Mexico");

  state.add("New York");  

  state.add("North Carolina");

  state.add("North Dakota");  

  state.add("Ohio");

  state.add("Oklahoma");

  state.add("Oregon");  

  state.add("Pennsylvania");

  state.add("Rhode Island");  

  state.add("South Carolina");  

  state.add("South Dakota");

  state.add("Tennessee");  

  state.add("Texas");  

  state.add("Utah");

  state.add("Vermont");  

  state.add("Virginia");  

  state.add("Washington");  

  state.add("West Virginia");

  state.add("Wisconsin");  

  state.add("Wyoming");

  return SUCCESS;

  }

  public List getState(){

  return state;

  }

}

<s:autocompleter theme="simple" list="state" StateName/> it creates a autocompleter list with the name of U.S. states.

autocompleter.jsp


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



<html>

  <head>

  <title>Struts 2 Autocompleter Example!</title>

  <s:head theme="ajax" />

  </head>

  <body>

  <h1>Struts 2 Autocompleter Example!</h1>

  <s:label name="stateName" value="Select State Name:" />

  <s:autocompleter theme="simple" list="state" name="StateName"/>

  </body>

</html>

Output of the autocompleter.jsp :

When you enter the 'c' letter in the textbox. You get the following names:

Related Tags for Auto Completer Example:
c, com, list, text, textbox, input, autocomplete, button, io, user, pdo, display, click, dropdown, key, value, tag, field, name, attribute, fields, cli, this, id, hidden, show, if, tex, options, partial, ie, box, where, with, match, to, drop, option, ld, ci, ast, sh, generate, ext, auto, e, hid, it, des, section, not, li, put, spl, use, pe, first, complete, art, enter, dde, in, no, part, as, m, nt, play, par, tr, os, dd, os, let, isp, cl, es, spec, toc, autocompleter, all, me, how, rate, rates, do, down, describe, s, sp, displays, at, k, is, ir, ha, ll, mpl, go, ea, and, ar, rt, xt, va, tt, tw, scr, s, s, ri, tbo, th, sho, av, st, alu, hat, disp, lds, ple, pl, nd, on, om, o, np

«Previous Index Next»