VF jQuery Autocomplete: Controller List

Question

I have a jquery autocomplete that is "working" only if I hardcode an array in javascript.

Here's what's happening. Type__c is a picklist. Once I change the picklist, I call a method in my extension that populates myList. I then want to use myList as the source for the autocomplete. I think I'm missing some steps here because after the method is called and myList has values in the controller, it's blank when I do console.log on myArr (commented out line).

Another issue is, even if I hardcode values into myList in the extension, it doesn't work with the autocomplete for some reason. The log shows it has values but autocomplete won't work. However, autocomplete works just fine with the hardcoded javascript array. Is it because javascript arrays are different? It seem to have quotes around it when hardcoded.

<script type="text/javascript">

        var j$ = jQuery.noConflict();
        var myArr = ['India', 'USA', 'China','FInland','Norway','Netherlands'];
        //var myArr ='{!myList}';
        j$(document).ready(function(){
            j$(".inputid").autocomplete({
                source : myArr
            });
        });
</script>

<apex:pageBlockSection id="topsection"  columns="1">
    <apex:inputField value="{!myObject.Type__c}" onChange="populateList()"/>
    <apex:inputField styleClass="inputid" id="itemname" value="{!myObject.Item_Name__c}"/>
    <apex:inputField value="{!myObject.Action__c}"/>
</apex:pageBlockSection>

EDIT: populateList() is already using an actionfunction and is working fine. Just didn't include it here.

Answer 1

If I understand correctly you're trying to execute apex method within onchange attribute. You should use actionsupport here.

Following example requests new list of strings each time object picklist has been changed.

VF:

<apex:page extensions="MyController" standardController="Opportunity" >
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection id="pbs" columns="1">
                <apex:inputField value="{!Opportunity.StageName}">
                    <apex:actionSupport event="onchange" rerender="pbs" />
                </apex:inputField>
                <apex:repeat value="{!items}" var="string" id="theRepeat">           
                    <apex:outputText value="{!string}" id="theValue"/><br/>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex:

public with sharing class MyController {

    public Opportunity opportunity{get;set;}

    public MyController(ApexPages.StandardController controller) {  
        this.opportunity = (Opportunity)controller.getRecord(); 
    }
    public list<string> getItems() {
        if (this.opportunity.StageName == 'Prospecting')
            return new list<string>{'alpha', 'bravo'};
        return null;
    }
}

Answer 2

This is just an illustration and there are other ways to do it but the main point, and to specifically address your question, is a merge variable on the VF page in a JS function is not updated when the corresponding controller property is updated.

Take this example:

function anExample(){
    console.log('{!someProperty}');
}

On load of the page lets say the controller sets the value of someProperty to 'First Value';

When you call anExample() on the page the console outputs "First Value".

Now, lets say you have a command button on the page that sets the value of the property in the controller to "Second Value".

Executing anExample() outputs "First Value" again.

A little trick to use to get around this would be to create a script panel and rerender it

<apex:outPutPanel layout="block" id="post_processing">
     <script>

         var aControllerProperty = '{!someProperty}';

     </script>
</apex:outPutPanel>

Then change your JS to:

function anExample(){
    console.log(aControllerProperty);
}

Then when you use a command button, action, etc rerender post_processing and the JS variables will be updated accordingly.