1

I am implementing AutoComplete for InputText. The problem is i am not able to load the AutoComplete InputText based on selected value. I have used the Jquery for AutoComplete.

It works well if i don't put the condition, i want to show the AutoComplete InputText List for the Selected value from the SelectList

Here is the Visualforce Page:

<apex:page controller="AutoCompleteController">
<script src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>

<script type="text/javascript"> 
  var j$ = jQuery.noConflict();
  var apexOrdersList =[];
  <apex:repeat value="{!Orders}" var="rec">            
      apexOrdersList.push('{!rec.Name}');            
  </apex:repeat>

  j$(document).ready(function(){
    j$(".apexaccountautocomplete").autocomplete({
      source : apexOrdersList
    });  
  });   
</script>
<apex:form > 
  <apex:PageBlock>
     <apex:PageBlockSection columns="2"> 
        <apex:PageBlockSectionItem >
           <apex:outputLabel value="Account: "/>
           <apex:actionRegion >
              <apex:selectList value="{!SelectedAccount}" size="1">
                 <apex:selectOptions value="{!Accounts}" />
                 <apex:actionSupport event="onchange" rerender="myOrder" /> 
              </apex:selectList>                                               
           </apex:actionRegion>
       </apex:PageBlockSectionItem>

       <apex:PageBlockSectionItem > 
           <apex:outputPanel id="myOrder">          
              <apex:outputText value="Orders :"/>
                 <apex:inputText styleClass="apexaccountautocomplete" value="{!SelectedOrder}"/>  
            </apex:outputPanel>                                        
       </apex:PageBlockSectionItem>
    </apex:PageBlockSection>
   </apex:PageBlock>
  </apex:form>
 </apex:page>

Apex Class:

public without sharing class AutoCompleteController{

   public String selectedAccout{get;set;}
   public String selectedOrder{get;set;}

   public class OrdersClass
   {
      public string Name{get;set;}
   }

   public list<selectOption> getAccounts(){
       List<selectOption> vals = new List<selectOption>();    
       vals.add(new selectOption('', '- None -'));
       for (Account a : [Select Id, Name FROM Account  order by Name LIMIT 1000]) 
       {
           vals.add(new selectOption(a.Id, a.Name));
       }
    return vals;
   }

   public list<OrdersClass> getOrders(){
       List<OrdersClass> OrdersList = new List<OrdersClass>();
       for (AggregateResult a : [Select Name nam FROM Order__c
                where Account__c =: SelectedAccount
                group by Name limit 1000]) 
            {
               if(string.valueof(a.get('nam')) == null)
                        continue;                   
               OrdersClass c = new OrdersClass();
               c.Name = string.valueof(a.get('nam'));
               OrdersList.add(c);

            }
            return OrdersList;
   }
}

Thank you

1 Answer 1

2

If you are building an autocomplete based on the selection of a value on the page then you have to refresh the javascript variable somehow.

i.e.

if the script is at the head of the page

<script>
  var a = "{!somevalue}"
</script>

when you console.log(a); it will ALWAYS be the value it was on page load regardless of if you change it in the controller.

What I have done to handle this in a quick and dirty way was to update them by putting the script in a output panel and rerender it when I execute methods in the controller that would change it like......

<apex:commandButton action="{!actionThatUpdatesVara}" name="test" rerender="script_refresh"/>

<apex:outPutPanel id="script_refresh">
     <script>
        var a = "{!somevalue}"
     </script>
</apex:outPutPanel>

You could use this to refresh the value of the orders variable and update the autocomplete data.

You might also want to look into Javascript remoting or other alternatives.

I know there has to be better ways but this is a quick way to accomplish the refresh of the variable

1
  • Perfect. Please let me know if you find any better way. And is it possible to highlight the search text in the list.? Feb 24, 2015 at 11:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .