Question

我将复杂对象列表设置为数据源，并且在kendo自动完成中选择项目时需要获取选定对象或选定字段。

例如，在http://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/data-binding/#toc-arrays-of-complex-data提供的示例我需要获得完整的对象，或者选择“阿尔巴尼亚”时获得“Alb”的字段值。

Answer 1

AutoComplete组件旨在始终将所选值保持为字符串。如果您想获取所选数据项，那么我认为您应该使用ComboBox或DropDownList组件。您可以在Value binding文档中找到更多详细信息：

http://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/value-binding/

Answer 2

我是通过在自动填充中添加模板并添加如下点击事件来完成此操作的：

     <kendo-autocomplete
                        #empList
                        [data]="EmployeeList"
                         [filterable]="true"
                       (filterChange)="handleFilter($event)"
                        valueField="DisplayName">
              <ng-template kendoAutoCompleteItemTemplate let-dataItem>
             <span class="k-state-default (click)="empSelected(dataItem)"">
{{dataItem.DisplayName }}</span><span class="ddlDept">
 ({{dataItem.DepartmentDescription }})</span>
          </ng-template>
        </kendo-autocomplete>

然后在组件中我添加了一个处理点击的函数：

public empSelected(value: any): void {
    this.selectedEmployee = value;
}

Answer 3

您可以通过过滤原始对象列表但返回的值来获取所选项目。

因此，以您提到的国家/地区为例，您可以在valueChange事件中获取所选国家/地区。然后按国家/地区名称过滤国家/地区列表。

它看起来像这样：

let selectedArray = this.listItems.filter(function(el){
       return el['text'].toLowerCase().startsWith(event.toLowerCase());
       //return el.toLowerCase().indexOf(event.toLowerCase()) > -1;
     }) 
if(selectedArray.length>0){
  let selectedItem = selectedArray[0]
}

获得所选项目后，您可以从中获得所需的任何数据。

在您的示例中，您将调用

let shortName = selectedItem.value

这样，当您选择阿尔巴尼亚时，shortName将设置为'Alb'

如何在kendo自动完成中获取所选对象

3 个答案: