how to do depedent autocompleter in struts2?

Question

I am using Struts2 in my project. I have to use two autocompleter control(struts2_tag) in jsp for State and City.

I have loaded state from table. When i select stateName in jsp it should check the cityName dependent to the State from database and load into City autocompleter tag.

Don't have an idea to call action class from onchange method of autocompleter because it doesn't work.

My current working code with box with Ajax in Jsp:(Working correctly)

<s:select name="stateName" list="stateList" onchange="loadCity(this.value)"  listKey="stateId" listValue="stateName" headerKey="-1" headerValue="Select the State"  />

<s:select name="cityName" list="cityList" listKey="cityId" listValue="cityName" headerKey="-1" headerValue="No City Found"/>

function loadCity(id){

              var frm = document.detailsAdd;  
          var URL = "AjaxPopMyCycle.action?stateName="+id;  
              ajaxEditFunctionCall(URL); 
}

function ajaxEditFunctionCall(URL){  
    var frm = document.detailsAdd;  
                 try{
                    xmlHttp=new XMLHttpRequest();
                }catch (e){
                try{
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e){
                        alert("Your browser does not support AJAX!");
                        return false;
                    }
                } 
            } 
            xmlHttp.onreadystatechange=function(){ 
              if(xmlHttp.readyState==4){ 
                    if (xmlHttp.status == 200) { 
                        if(xmlHttp.responseXML != null ){                      
                                showMessage(xmlHttp.responseXML); 
                        }
                    }
                }
            }
            xmlHttp.open("GET", URL, true); 
            xmlHttp.send(URL);
        }
        function showMessage(errorDisplayXML){  
        var frm = document.surveyAdd; 
        var checklist=document.detailsAdd.cityName;
            checklist.options.length=0;  
            if(xmlHttp.readyState==4){
    if(errorDisplayXML.getElementsByTagName("rootElement")[0]!=null){  
    var rootElement  = errorDisplayXML.getElementsByTagName("rootElement")[0];
    var location = rootElement.getElementsByTagName("Message"); 
    var locArr = location[0]; 
    var locArr = " ";
    var tempArr;
    var tempArr1; 
    for(var i=0; i<location.length; i++){ 
        tempArr = "";
        tempArr1 = "";
        locArr = location[i];   
    tempArr = locArr.getElementsByTagName("cityId")[0].firstChild.nodeValue;   
    tempArr1 = locArr.getElementsByTagName("cityName")[0].firstChild.nodeValue;  
    checklist.options[i]= new Option(tempArr1,tempArr); 
    }       
    }else{
    alert("errorDisplayXML Contains NULL");
    }
}
} 

I need to do the same in sx:autocompleter tag.

so,Anybody help me to give any Idea to do this task. Thanks in Advance!.

Answer 1

You need to define a function which you can call on the particulat event of the first drop-down. based on the selected value, pass that value to action class,create a list and pass the result using JSON ()user S2-Json plugin).Here is the outline of function

function searchDistrict()
{ 
        dropdownreset(document.getElementById("district"));
        var selectedState = document.getElementById("stateList");
        var statedata = selectedState.options[selectedState.selectedIndex].value;
        var formInput='state='+statedata;       
        $.getJSON('search/searchDistrict',formInput,function(data) {
            $('.result').html('' + data.districts + '');
            $.each(data.districts,function(index, value){
            var districtid = document.getElementById("district_");
            var option=new Option(value,value);
            try{
                districtid.add(option);
            }
            catch(e){
                districtid.appendChild(option);
            }
            });
            });
    }