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

Answers


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);
});

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);
                }

Need Your Help

knockout apply binding to generated binding inside html binding

javascript knockout.js

I am generating the following in a for loop (ignore the jade template syntax for now):