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

3 回答

• 1

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

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

  回复于 2024-04-20T13:50:14+08:00
• 0

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

  <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;
  }
  

  回复于 2024-04-20T13:50:14+08:00
• -1

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

  因此，以您提到的国家/地区为例，您可以在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'

  回复于 2024-04-20T13:50:14+08:00