CODEWITHSUNDEEP
jqueryjsonkendo-ui
M.I.T.
M.I.T.

Reputation: 1042

Json issue in Auto Complete using kendo ui

i am using this document to use auto complete search http://demos.kendoui.com/web/autocomplete/index.html

in this auto complete there is only the name while i want to use name and id 

  $(document).ready(function () {
                 var data = [
                                {"value":"Albania","id":"1"},
                                {"value":"Andorra","id":"2"},
                                {"value":"Armenia","id":"3"},
                                {"value":"Austria","id":"4"},
                                {"value":"Azerbaijan","id":"5"},
                                {"value":"Belarus","id":"6"},
                                {"value":"Belgium","id":"7"},
                                {"value":"Bosnia & Herzegovina","id":"8"},
                            ];                 

                //create AutoComplete UI component
                $("#countries").kendoAutoComplete({
                    dataSource: data,
                    filter: "startswith",
                    placeholder: "Select country...",
                    dataTextField: "value",
                    dataValueField: "value",
                    separator: ", "
                });


            });

this code is working but how can i alert the the id when user select any country name

Upvotes: 0

Views: 1907

Answers (3)

M.I.T.
M.I.T.

Reputation: 1042

Answer is

                $("#countries").kendoAutoComplete({
                    dataSource: data,
                    select: onSelect,
                    filter: "startswith",
                    placeholder: "Select country...",
                    dataTextField: "value",
                    dataValueField: "value",
                    separator: ", "

                });

there is event select and i call function onSelect that is 

                function onSelect(e) {
                    var dataItem = this.dataItem(e.item.index());
                    alert(dataItem.id);
                }

Upvotes: 1

Vlad Omelyanchuk
Vlad Omelyanchuk

Reputation: 3091

1.You need to set dataValueField = "id":

$("#countries").kendoAutoComplete({
    dataSource: data,
    filter: "startswith",
    placeholder: "Select country...",
    dataTextField: "value",
    dataValueField: "id",
    separator: ", "
});

2.Set handler on change event. If you are using MVVM:

onCountryChange = function (e) {
    var selectedCountry = self.AllCountries[e.item.index()];
    alert(selectedCountry.id);
});

Upvotes: 1

Jeff
Jeff

Reputation: 736

You must drop the comma after the last element in the arrays. Now JavaScript sees a last, empty element and that does not support the .toLowerCase.

Upvotes: 0

Related Questions