I want to implement editable autocompleter in struts2 using jquery.

Hi all,
I tried to implement the Struts2-jquery Autocomplete explained in http://www.weinfreund.de/struts2-jquery-showcase/index.action. i.e. Autocompleter JSON using map.But am not able to get the list populated .
For reference i have attached the jsp which I am using.
1. I have written below mentioned code in jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net/el"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 
<title>Create Company</title>

<sj:head jqueryui="true"  />
 <script language="JavaScript">
//var x=window.history.length;

window.history.forward(1);

</script>

$(document).ready(function () {

toggleButtons(document.getElementById("buttonClick").value);
		  
		});
		   	
     function cancelButtons(){
    
      $('#editModalWindow').dialog('close');
     };

function deleteCancelButton(){
        $('#deleteModalWindow').dialog('close');
        
       };

}

function resetGroups(){
            var groupDesc=document.getElementById("groupDesc");
            var groupCode=document.getElementById("groupCode");
            groupDesc.value="";
            groupDesc.removeAttribute("readonly");
     
        	groupCode.options[0].selected = true;
   
        }
        function toggleButtons(id){
			alert(id+"--button clicked"+"===>"+(id=="edit"));
			 $('#buttonClick').val(id);
			 alert($('#buttonClick').val());
			 var val=document.getElementById("buttonClick");
			 val.value=id;
			var edit= document.getElementById("edit");
			var add=document.getElementById("add");
			var cancel=document.getElementById("cancel");
			var save=document.getElementById("save");
			var deleteButton=document.getElementById("delete");
			if(id == "add"){

/* disable add button*/
					
					add.setAttribute("style", "display:none");
					var addDisabled= document.getElementById("addDisabled");
					addDisabled.removeAttribute("style");		
					addDisabled.removeAttribute("href");
					
					/* disable edit button*/
					edit.setAttribute("style", "display:none");
					var editDisabled= document.getElementById("editDisabled");
					editDisabled.removeAttribute("style");		
					deleteButton.removeAttribute("href");

/* disable delete button*/
					deleteButton.setAttribute("style", "display:none");
					var deleteDisabled= document.getElementById("deleteDisabled");
					deleteDisabled.removeAttribute("style");		
					deleteDisabled.removeAttribute("href");
					/* enable save button*/
					save.removeAttribute("style");
					var saveDisabled= document.getElementById("saveDisabled");
					saveDisabled.setAttribute("style", "display:none");		
			}else if(id=="cancel"){
				/* enable add button*/
				add.removeAttribute("style");
				var addDisabled= document.getElementById("addDisabled");
				addDisabled.setAttribute("style", "display:none");	
				
				
				/* enable edit button*/
				edit.removeAttribute("style");
				var editDisabled= document.getElementById("editDisabled");
				editDisabled.setAttribute("style", "display:none");

/* enable delete button*/
				deleteButton.removeAttribute("style");
				var deleteDisabled= document.getElementById("deleteDisabled");
				deleteDisabled.setAttribute("style", "display:none");			
				
				/* disable save button*/
				save.setAttribute("style","display:none");
				var saveDisabled= document.getElementById("saveDisabled");
				saveDisabled.removeAttribute("style");		
				saveDisabled.removeAttribute("href");
			}else if (id=="edit"){
				/* disable add button*/
				
				add.setAttribute("style", "display:none");
				var addDisabled= document.getElementById("addDisabled");
				addDisabled.removeAttribute("style");		
				addDisabled.removeAttribute("href");

/* disable delete button*/
				deleteButton.setAttribute("style", "display:none");
				var deleteDisabled= document.getElementById("deleteDisabled");
				deleteDisabled.removeAttribute("style");		
				deleteDisabled.removeAttribute("href");

/* enable save button*/
				save.removeAttribute("style");
				var saveDisabled= document.getElementById("saveDisabled");
				saveDisabled.setAttribute("style", "display:none");			
			}
        }

$.subscribe('autocompleteChange', function(event, data) {
        		var ui = event.originalEvent.ui;
          		var message = ui.item.value;
          		alert(message);
     			var test=document.getElementById("companyMap_widget");
     			
     			alert(test.value.split('_')[1]);
     			 $('#groupDesc').val(test.value.split('_')[1]);
     			 $('#temp').val(ui.item.value);
        	});
      
        $.subscribe('test', function(event, data) {
        	if($('#groupDesc').val()==''){
        		 $('#groupDesc').val();
            }
        	
    		
    	});

$.subscribe('autocompleteSelect', function(event, data) {
          	var ui = event.originalEvent.ui;
          	var message = ui.item.value;
          	if(ui.item.key) {
          		message = '( '+ ui.item.key +' ) '+message;
          	}
        		$('#topics').html('<i>'+message+'</i>');
        	});

$.subscribe('autocompleteFocus', function(event, data) {
          	var ui = event.originalEvent.ui;
          	var message = ui.item.value;
          	if(ui.item.key) {
          		message = '( '+ ui.item.key +' ) '+message;
          	}
        		$('#topics').html('<u>'+message+'</u>');
        	});

$.subscribe('complete', function(event, data) {
    		var ui = event.originalEvent.ui;
      		var message = ui.item.value;
      		
 			var test=document.getElementById("companies");
 			
 		
 			 $('#groupDesc').val(test.value.split('_')[1]);
 			 
    	});
     
   </script>

</head>
<body>

<center>
					<s:form id="createComp" method="post" namespace="/admin" >
						
						<s:actionerror/>
						<s:actionmessage/>
						
						<table height="400px">
							<tbody>
								
								<TR>

<td class=tdLabel1><label class="label" for="group">Group:</label>
									</td>
									<td><s:url id="jsoncall" action="jsonList" />
	
             <sj:autocompleter 
	    	id="companyMap" 
	    	name="echo"
	    	label="Handle a Map"
	    	
			 href="%{jsoncall}" 
	    	list="grList"
			
			
			  onCompleteTopics="onCompleteLoading"  
			
	    />        
 <script>  
        $.subscribe('onCompleteLoading', function(event, data) {  
            alert("hi");  
        });  
        </script> 
	</tr>								
							
							</tbody>
							<tfoot style="margin-top: 2px; min-height: 24px;">
							
								<s:hidden name="buttonClicked" id="buttonClick" value="%{buttonClicked}"></s:hidden>
								<TR>
									<TD><sj:a  
											button="true"
											theme="simple" buttonIcon="ui-icon-plus" onclick="clearForms();toggleButtons('add');" id="add">Add
										</sj:a>
								<a id="addDisabled" style="display: none;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
										<span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
										<span class="ui-button-text"> Add </span>
								</a>	
								</TD>
									<TD>
										
								  		<sj:a openDialog="editModalWindow" button="true"
											buttonIcon="ui-icon-newwin" id="edit" >	Edit
    							  </sj:a>
				    				<a id="editDisabled" style="display: none;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
<span class="ui-button-text"> Edit </span>
</a>			
									</TD>

<TD><sj:a openDialog="deleteModalWindow" button="true"
											buttonIcon="ui-icon-newwin" id="delete" >Delete
    							</sj:a>
    							<a id="deleteDisabled" style="display: none;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
<span class="ui-button-text"> Delete </span>
</a>	
									</TD>

<TD><sj:a theme="simple" onclick="resetFormField();toggleButtons('cancel');" button="true"
											buttonIcon="ui-icon-close" id="cancel">Cancel
										</sj:a></TD>
									<td></td>
								</TR>

</tfoot>
						</table></s:form>

</center>

</div>
			
			<sj:dialog id="editModalWindow"
				buttons="{
                
                'Cancel':function() { cancelButtons(); }
                }"
				autoOpen="false" modal="true" title="List of Companies"
				position="['center','center']" overlayColor="#903"
				overlayOpacity="0.8" href="modalContent.action" dialogClass="test" width="480" height="350" resizable="false">
				
				<display:table name="listCompany" uid="row" sort="list" class="listingTable" >
						
						<display:column  title="Company Code">
						
									<s:url id="editUrl"  value="/admin/edit.action" >
									 <s:param name="companycode" value="#attr.row.companyCode"></s:param>		
								</s:url>
								
        						
      							  <s:a id="alink" href="%{editUrl}" onclick="toggleButtons('edit');">
         							 ${row.companyCode}
         							
       							 </s:a>
						
						</display:column>
						<display:column title="Company Name" property="companyName" ></display:column>
						<display:column title="Group Code" property="groups"  ></display:column>
						<display:column title="Group Name" property="groupDesc" ></display:column>
			</display:table>
			</sj:dialog>
			<sj:dialog id="deleteModalWindow"
				buttons="{                
                'Cancel':function() { deleteCancelButton(); }
                }"
				autoOpen="false" modal="true" title="List of Companies"
				position="['center','center']" overlayColor="#903"
				overlayOpacity="0.8" href="modalContent.action" width="480" height="350" resizable="false" >
			<display:table name="listCompany" uid="row" class="listingTable">
						
						<display:column   title="Company Code"   >
								<s:url id="deleteUrl" method="post" value="/admin/delete.action">
									 <s:param name="companycode" value="#attr.row.companyCode"></s:param>		
								</s:url>
								
        						
      							  <s:a id="ajaxlink" href="%{deleteUrl}" onclick="return confirm('Are you sure?');" >
         							 ${row.companyCode}
         							
       							 </s:a>
								
						</display:column>
						<display:column title="Company Name" property="companyName" ></display:column>
						<display:column title="Group Code" property="groups" ></display:column>
						<display:column title="Group Name" property="groupDesc"></display:column>
					</display:table>
			</sj:dialog>
			<div id="ft" role="contentinfo"
				style="min-height: 24px; border: 1px solid #ddd; background: url(../images/bg_blue.png) repeat-x center;"
				align="center">

<ul>

</ul>

</div>
	</div>

</body>
</html>

2. In struts.xml :

3. in class named CompanyJsonAction

public class CompanyJsonAction extends BaseAction {
	private Map<String,String> grList;
	public void setGrList(Map<String, String> grList) {
		System.out.println("in setter of grList");
		this.grList = grList;
	}
	@Override
	public String execute() throws Exception {
		List<Company> companies = new ArrayList<Company>();
		companies = companyService.getAllGroups();
	   /* Map<String, String> map = new HashMap<String, String>();*/
		 grList= new HashMap<String, String>();
	      for (Company company : companies)
	      {
	    	  grList.put(company.getCompanyCode(),company.getCompanyName());
	      }
		//getGrList();
		return SUCCESS;
	}
	public String test() throws Exception{
		System.out.println("in companyjsonAction");
		return execute();
	}
	public Map<String, String> getGrList() {
	    return grList;
	}
	private CompanyService companyService;

public CompanyService getCompanyService() {
		return companyService;
	}
	public void setCompanyService(CompanyService companyService) {
		this.companyService = companyService;
	}

}

I am using struts version: struts2-core 2.2.1.1.jar.
and struts2-jquery plugin : struts2-Jquery-plugin-3.0.2.jar

Please help me out in this.