Question

I have several auto completes all set up and working using the same datasource defined as a variable. However I am not sure how to get my groups autocomplete to work as this has the potential to have multiple values.

Here is my datasource:

UsersDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/_layouts/handlers/Users.ashx",
            dataType: "json",
            type: "get",
            cache: false
        }
    }
});

A sample of this json is shown below (note the groups):

[{"Id":"USERNAME","Type":"External","Name":"Jim Jones","Email":"[e-mail]","Address":"1600 Penn Ave","Organization":"Company ABC","Notes":"User Notes","Groups":["Group A","Group B","Group C","Group D"]}]

All of the other autocompletes I have set up work fine with this code:

$("#SearchAddress").kendoAutoComplete({
    placeholder: "Address",
    dataTextField: "Address",
    dataValueField: "Address",
    dataSource: UsersDataSource
});

I am not really sure how to make this work for the groups… Any advice would be appreciated.

Edit: I have created a jsfiddle to illustrate this issue

Edit: Fiddle updated again

Answer 1

You should specify that the second autocomplete is bound to the Groups field of the peoples array:

$("#SearchGroup").kendoAutoComplete({
    placeholder: "Group",
    dataSource: {
        data: peoples[0].Groups,
    }
});

http://jsfiddle.net/pSMtt/4/​

Here is how to get all groups:

var groups = [];

for (var i = 0; i < peoples.length; i++) {
    for (var j = 0; j < peoples[i].Groups.length; j++) {
       groups.push(peoples[i].Groups[j]);
    }
}

$("#SearchGroup").kendoAutoComplete({
    placeholder: "Group",
    dataSource: {
        data: groups,
    }
});