jquery - 使用剑道 ui 自动完成中的 Json 问题

Question

我正在使用此文档来使用自动完成搜索http://demos.kendoui.c​​om/web/autocomplete/index.html

在这个自动完成中只有名称，而我想使用名称和 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: ", "
                });


            });

此代码正在运行，但是当用户选择任何国家/地区名称时，我如何提醒 id

Answer 1

答案是

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

                });

有事件select，我调用的函数onSelect是

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

Answer 2

1.您需要设置dataValueField =“id”：

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

2.设置更改事件的处理程序。如果您使用的是 MVVM：

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

Answer 3

您必须在数组中的最后一个元素之后删除逗号。现在 JavaScript 看到最后一个空元素并且不支持 .toLowerCase。