使用剑道 ui 自动完成中的 Json 问题答案

【问题标题】：Json issue in Auto Complete using kendo ui使用剑道 ui 自动完成中的 Json 问题
【发布时间】：2013-05-03 11:46:32
【问题描述】：

我正在使用这个文档来使用自动完成搜索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

【问题讨论】：

用{"value:Albania,id:1"},代替{"value":"Albania","id":"1"},
@MIT：如果可能的话，在 jsfiddle.net 上进行同样的模拟
[jsfiddle.net/mitesh_inf/BFNtf/] (jsfiddle.net/mitesh_inf/BFNtf)
<input id="countries" /> 这是你的输入选择权，自动完成被调用。然后像这样关联一个更改事件，.on('change',function(){ //when value changes,do something })

标签： jquery json kendo-ui

【解决方案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);
});

【讨论】：

有零钱请查看我的回答

【解决方案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);
                }

【讨论】：

【解决方案3】：

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

【讨论】：

请注意作者在我回答后更改了原问题。最初他问'但它不起作用，控制台中出现这样的错误 TypeError: d.toLowerCase is not a function});'