Question

我正在使用此文档来使用自动完成搜索http://demos.kendoui.com/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

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 2

答案是

                $("#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 3

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

使用kendo ui在自动完成中出现Json问题

3 个答案: