2

I'm trying to get my autocomplete functionality to work in my VF page for a TextField. I need to obtain the List of a custom Object from my controller (with the name and the ID of the record). I use this in my VF page to add the ID into a hidden field and later on retrieve this. When I run the basic javascript example:

j$(document).ready(function(){

        var covercauses = [{label: "Test1", value: "1"},
                                {label: "Test2", value: "2"},
                                {label: "Test3", value: "3"},
                                {label: "Test4", value: "4"},
                                {label: "Test5", value: "5"}];

        j$('[id$=covercausefield]').autocomplete({
            source: covercauses,
            select: function (event, ui) {
                j$('[id$=covercauseid]').val(ui.item.value); // Set ID in hidden field
                j$('[id$=covercausefield]').val(ui.item.label); // Set textbox with value
                return false;
            },
            focus: function(event, ui) {
                event.preventDefault();
                j$('[id$=covercausefield]').val(ui.item.label);
                return false;
            }
        });
    });

Everything works fine, but I cannot seem to get it to work when trying to retrieve the desired List from my controller. I have tried a couple of approaches but simply not succeeded my latest attempt was to make a JSON string out of a List of a Wrapper class and try to parse this using the controller code:

public String getTestList(){


    List<CustomObject__c> covs = [Select Id, Name 
                                From CustomObject__c];

    List<CustomObjectWrapper> CustomObjects = new List<CustomObjectWrapper>();
    for(CustomObject__c c : covs){
        CustomObjectWrapper cWrp = new CustomObjectWrapper();
        cWrp.Label = c.Name;
        cWrp.Value = c.Id;
        CustomObjects.add(cWrp);
    }
    return JSON.serialize(CustomObjects);
}

But when trying to retrieve this string in the javascript function I get the following:

[{"Value":"a0Qm0000000ZJLxEAO","Label":"test1"},{"Value":"a0Qm0000000ZJLyEAO","Label":"test2"},{"Value":"a0Qm0000000ZJM7EAO","Label":"test4"},{"Value":"a0Qm0000000ZJM2EAO","Label":"test3"}];

Can someone please point me in the right direction for creating a List or something like that according to the format in the top that I will be able to parse in the specified javascript function.

EDIT: This is what I am seing right now when using the following set up:

VF:

var cs = {!cList};

        alert(cs);

        j$('[id$=cfield]').autocomplete({
            source: cs,
            select: function (event, ui) {
                j$('[id$=cid]').val(ui.item.Value); // Set ID in hidden field
                j$('[id$=cfield]').val(ui.item.Label); // Set textbox with value
                return false;
            },
            focus: function(event, ui) {
                event.preventDefault();
                j$('[id$=cfield]').val(ui.item.Label);
                return false;
            }
        });

Controller:

public String getcList(){
List<CustomObject__c> covs = [Select Id, Name 
                                From CustomObject__c];

    List<CSWrapper> cs = new List<CSWrapper>();
    for(CustomObject__c c : covs){
        CSWrapper cWrp = new CSWrapper();
        cWrp.Label = c.Name;
        cWrp.Value = c.Id;
        cs.add(cWrp);
    }


    return JSON.serialize(cs);
}

enter image description here

EDIT 2: Final Solution

I have no idea what I did wrong before but this is my final code that works as intended:

Controller:

public String getcList(){
    List<CustomObject__c> covs = [Select Id, Name 
                                From CustomObject__c];

    List<CSWrapper> cs = new List<CSWrapper>();
    for(Cover_Cause__c c : covs){
        CSWrapper cWrp = new CSWrapper();
        cWrp.label = c.Name;
        cWrp.value = c.Id;
        cs.add(cWrp);
    }
    return JSON.serialize(cs);
}

VF:

    var cs = {!cList};
j$('[id$=csfield]').autocomplete({
    source: cs,
    select: function (event, ui) {
        j$('[id$=csid]').val(ui.item.value);
        j$('[id$=csfield]').val(ui.item.label);
        return false;
    },
    focus: function(event, ui) {
        event.preventDefault();
        j$('[id$=csfield]').val(ui.item.label);
        return false;
    }
});

Thanks for your comments!

  • It doesn't appear that there's any problem with the string you've got at the end of your question. One thing to point out though is that the keys in the JavaScript object are case-sensitive. Value is not the same as value... so in your autocomplete script, .val(ui.item.value); should be written as .val(ui.item.Value); or your wrapper class should have lower-case member names. – Mark Pond Apr 7 '15 at 16:42
  • I had the capital first letter for the Names, unfortunatley this does not work. Please see my edit of the question regarding what I'm seeing. – erikduvet Apr 8 '15 at 13:16
0

For me it is working.

Controller Code

public class JSONClass{
    public String JsonString{get;set;}
    public JSONClass(){
       //query data and add necessary values to list
       JsonString = JSON.serialize(autocompleteDataList);
    }
}

Page code

var autocompleteValues ={!JsonString};
$( "#tags" ).autocomplete({
  source: autocompleteValues
});

As you might have noticed, I am using only a list of strings for autocomplete. In your case it is id,value pairs. Try setting the JSON data variable in controller as a String property.

If you are returning data as method return type, I think you might have to use below script to convert it into valid JSON again in javascript, before you can use it. JSON.parse(valueReturnedByMethod);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.