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">            

      source : apexOrdersList
<apex:form > 
     <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:PageBlockSectionItem > 
           <apex:outputPanel id="myOrder">          
              <apex:outputText value="Orders :"/>
                 <apex:inputText styleClass="apexaccountautocomplete" value="{!SelectedOrder}"/>  

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)
               OrdersClass c = new OrdersClass();
               c.Name = string.valueof(a.get('nam'));

            return OrdersList;

Thank you

1 Answer 1


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.


if the script is at the head of the page

  var a = "{!somevalue}"

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">
        var a = "{!somevalue}"

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

  • Perfect. Please let me know if you find any better way. And is it possible to highlight the search text in the list.? Commented 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 .