如何将远程API数据映射到Kendo AutoComplete并获取unitKey

你目前已经实现了AutoComplete的远程数据源选项展示，但在select事件中只能获取选中文本，要拿到对应的unitKey属性，可以通过以下方法解决：

解决方案核心：使用dataItem()方法获取完整数据对象 #

Kendo AutoComplete的select事件参数e.item是选中项的DOM元素，你可以通过组件实例的dataItem()方法，传入这个DOM元素，就能提取出对应的完整JSON数据对象。

修改后的完整代码： #

//create AutoComplete UI component
$("#autoAddress").kendoAutoComplete({
    minLength: 3,
    dataTextField: "address",                
    filter: "startswith",
    placeholder: "Address lookup ...",            
    select : function(e) {
        // 获取当前AutoComplete组件实例
        var autoComplete = this;
        // 通过dataItem方法获取选中项的完整数据对象
        var selectedItem = autoComplete.dataItem(e.item);
        
        // 输出所需属性
        console.log("选中的unitKey：", selectedItem.unitKey);
        console.log("选中的地址：", selectedItem.address);
    },
    dataSource: new kendo.data.DataSource ({   
        serverFiltering: true,
        transport: {
            read: {
                url: "https://testapi.mydomain.com/homeinfo/api/address/",
                data: {
                    q : function() {
                        return $("#autoAddress").data("kendoAutoComplete").value();
                    },                                
                    maxRows: 30
                }
            }
        },
        schema : {
            data: function(response){
                return response;
            }
        }                               
    })
});

说明 #

• this在select事件回调中直接指向当前的AutoComplete实例，无需额外通过选择器获取，更简洁高效。
• dataItem(e.item)会返回与选中DOM项绑定的完整数据对象，包含API返回的所有属性（如unitKey、address）。

内容的提问来源于stack exchange，提问作者Jay Bowman