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:

Current Comments

15 comments so far (post your own) View All Comments Latest 10 Comments:

Hi.

Yesterday one friend of mine copied this code and tried to execute this after making some slight(in fact not slight at all!!!!) changes. He was getting some error message. On correcting it i found that he had declared the state variable of type List again inside the execute function!!! I just removed it and the code started working!!! This was just to inform to avoid such mistake.

Posted by harsh on Saturday, 11.29.08 @ 07:20am | #82176

View This Comment Separately

Hi,

can I change the fact, that the list only shows the first 30 entries, when I press the drop down button?

thanks!

Posted by Stefan on Tuesday, 09.30.08 @ 15:56pm | #80795

View This Comment Separately

How can I replace any white space typed by the user in the autocompleter combobox

Posted by reza on Wednesday, 09.24.08 @ 03:08am | #80646

View This Comment Separately

I have tried with dataFieldName
it works fine for struts2.0.9
but it isn't able to recognize the attribute dataFieldName in struts2.0.6
is there any thing i need to modify/include?

Posted by Sarada on Tuesday, 08.5.08 @ 17:25pm | #71125

View This Comment Separately

Hi,
I work on the ajax auto completer ..I am getting the values from the database into my list and where i select the value it doesn't displays the related fields values..

Pls send me the code...

Thanks a lot..
Shujath..

Posted by Shuja on Monday, 08.4.08 @ 17:48pm | #70949

View This Comment Separately

Hi,
I have seen the <s:file> and tried file upload.But ther is no database related examples nand any other.. How can we store a uploaded file into BLOB in Oracle database..

Thanks & Regards,
Mohammed Arif.

Posted by Arif on Monday, 08.4.08 @ 17:45pm | #70947

View This Comment Separately

I just want to remove the down arrow and included the line showDownArrow="false" but it doesn't make any difference between false and true
Could you please let me know how to remove the dropdown in the textbox.

Posted by Sarada on Monday, 08.4.08 @ 17:29pm | #70945

View This Comment Separately

Posted by Sarada on Monday, 08.4.08 @ 16:31pm | #70940

View This Comment Separately

I have tried the code ,It's really good.
I just tried to remove the drop downarrow
so i inculded the parameter showDownArrow="false"
true and false both are reflecting the same.
Could you please help me how to disable the drop down arrow.

Posted by Sarada on Monday, 08.4.08 @ 16:14pm | #70938

View This Comment Separately

Hi

I tried ur code , if i am passing list name in jsp auto complete is not working
If i put some hard coded values as list values it works

do suggest

Posted by Amit on Wednesday, 04.30.08 @ 09:58am | #58188

View This Comment Separately