Hi ,

I like to display a dependent autocomplete in visualforce page.

1. Case reason (Auto Complete)

2.Case Disposition (Dependent on Case Reason)

Here i have using 2 @Remote action

Can anyone help me how can i achieve this process

Note  : I didn't get case reason Id in Case Disposition query

Class
===========================================

global class AutoCompleteCtr
{
    public static List<String> CsRsnLst{get;set;}
    public static List<String> CsDispLst{get;set;}
    public String Rsn_Name{get;set;}
    public String Disp_Name{get;set;}
    public String successMessage{get;set;}
    Public Case_Reason__c csr_reason{Get;Set;}
    Static ID CsRsn_Id{Get;Set;}
    Static Id CsDisp_Id{Get;Set;}
    Public Id Case_ID{get;set;}
    
    Public AutoCompleteCtr(ApexPages.StandardController controller){
        
    }
    
    /*Case Reason*/
    @RemoteAction
    global static String[] populateCaseRsnByName(String value)
    {
        try
        {
            CsRsnLst=new List<String>();
            if(String.isNotBlank(value))
            {
                value= '%'+value+'%';
                List<Case_Reason__c> Rsn_lst=[Select Id,name from Case_Reason__c where name LIKE:value];
                for(Case_Reason__c irow_rsn : Rsn_lst)
                {
                    CsRsnLst.add(irow_rsn.name);
                }
            }
            System.debug('CsRsnLst | ' + CsRsnLst);
            return CsRsnLst;
        } 
        catch(Exception e)
        {
            System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
        }
        return null;
    }
 
    public void SelectCasereason()
        
    {
        try
        {
            Rsn_Name=ApexPages.currentPage().getParameters().get('CaseReasonName');
            if(String.isNotBlank(Rsn_Name))
            {
                 csr_reason =[select id,name from Case_Reason__c where Name=:Rsn_Name];
                System.debug('csr_reason ' + csr_reason);
                csr_reason.Name ='Autocomplete';
                CsRsn_Id = csr_reason.Id;
                System.debug('Case Reason Id | ' + CsRsn_Id);
            }
        }
        catch(Exception e)
        {
            System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
        }
    }
    /*Case Disposition Remote Action*/
    @RemoteAction
    Global static String[] populateCaseDispByName(String value)
    {
        try
        {
            //Id CsRsn_Id;
            //System.debug('Case REason Id | '+ CsRsn_Id);
            CsDispLst=new List<String>();
            if(String.isNotBlank(value))
            {
                value= '%'+value+'%';
                System.debug('Case Reason Id | ' + CsRsn_Id);
                List<Case_Disposition__c> Disp_lst=[Select Id,name,Case_Reason__c  from Case_Disposition__c where  name LIKE:value  AND Case_Reason__c =: CsRsn_Id];
                System.debug('Disp_lst Size | ' + Disp_lst.size());
                for(Case_Disposition__c irow_disp : Disp_lst)
                {
                    CsDispLst.add(irow_disp.name);
                }
            }
            return CsDispLst;
        } 
        catch(Exception e)
        {
            System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
        }
        return null;
    }
    public void SelectCaseDisp()
    {
        try
        {
            Disp_Name=ApexPages.currentPage().getParameters().get('caseDispName');
            if(String.isNotBlank(Disp_Name))
            {
                Case_Disposition__c csr_Dispn =[select id,name from Case_Disposition__c where Name=:Rsn_Name];
                csr_Dispn.name ='Autocomplete';
                CsDisp_Id = csr_Dispn.Id;
            }
        }
        catch(Exception e)
        {
            System.debug('Message:='+e.getMessage()+'**Line Number='+e.getLineNumber());
        }
    }
    
    //Save Into Case
    Public void Save(){
        Case_ID = Apexpages.currentPage().getParameters().get('Id');
        Case cs = New Case();
        cs.Id = Case_Id;
        cs.Reason__c = CsRsn_Id;
        cs.Case_Disposition__c = CsDisp_Id;
        update cs;
    }
}

VF-PAge
=====================================

<apex:page standardController="Case" extensions="AutoCompleteCtr" sidebar="false" showHeader="false">
    <html lang="en">  
        <head>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <title>Case Reason Autocomplete</title>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
            <link rel="stylesheet" href="/resources/demos/style.css"/>
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <!--Case Reason Auto Complete -->
            <script>
            $( function() {
                $( "#tags" ).autocomplete({
                    source: function(request, response) {
                        Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AutoCompleteCtr.populateCaseRsnByName}',
                                                                  request.term,
                                                                  function(result, event){
                                                                      if (event.status)
                                                                      {
                                                                          console.log(result);
                                                                          response(result);
                                                                      }
                                                                      else
                                                                      {
                                                                          alert(event.message);
                                                                      }
                                                                  });
                    },
                    select:function( event, ui ){
                        // Call class method by passing this value using action function            
                        callControllermethod(ui.item.label);
                    }
                });
            } );
            </script>
            <!--Case Disposition Auto Complete -->
            <script>
            $( function() {
                $( "#tags1" ).autocomplete({
                    source: function(request, response) {
                        Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AutoCompleteCtr.populateCaseDispByName}',
                                                                  request.term,
                                                                  function(result, event){
                                                                      if (event.status)
                                                                      {
                                                                          console.log(result);
                                                                          response(result);
                                                                      }
                                                                      else
                                                                      {
                                                                          alert(event.message);
                                                                      }
                                                                  });
                    },
                    select:function( event, ui ){
                        // Call class method by passing this value using action function            
                        callControllermethod(ui.item.label);
                    }
                });
            } );
            </script>
        </head>
        <body >
            <apex:form >
                <apex:actionRegion >
                    <apex:actionFunction name="callControllermethod" action="{!SelectCasereason}" reRender="mssge">
                        <apex:param name="CaseReasonName" value=""/>
                    </apex:actionFunction>
                    <apex:actionFunction name="callControllermethod" action="{!SelectCaseDisp}" reRender="mssge">
                        <apex:param name="caseDispName" value=""/>
                    </apex:actionFunction>
                </apex:actionRegion> 
                <div class="Container" >
                    <div class="ui-widget">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="col-sm-6">
                                    <label for="tags" class="pull-right">Case Reason </label>   
                                </div>
                                <div class="col-sm-6">
                                    <input id="tags"  />  
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="ui-widget">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div class="col-sm-6">
                                    <label for="tags1" class="pull-right">Case Disposition </label> 
                                </div>
                                <div class="col-sm-6">
                                    <input id="tags1" />
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <br/> <br/>
                    <div class="form-group">
                        <div class="col-sm-12">
                            <div class="col-sm-6">
                            </div>
                            <div class="col-sm-6">
                                <apex:commandButton action="{!Save}" value="Proceed" styleClass="buttonStyle" style="background: #E6E6FA"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<apex:outputPanel id="mssge">
<div style="margin: 5px;color: green;">{!successMessage}</div>
</apex:outputPanel>-->
            </apex:form>
        </body>
    </html>
</apex:page>

Thanks in Advance