Angular-Kendo 在更改时自动完成所选值答案

【问题标题】：Angular-Kendo autocomplete selected value on changeAngular-Kendo 在更改时自动完成所选值
【发布时间】：2022-01-18 09:18:46
【问题描述】：

我正在使用带有下拉值的剑道自动完成搜索框输入用户名后，会调用后端服务，生成值列表并绑定到搜索栏。

现在，我有一个“搜索”按钮，可以根据所选值路由到下一页。

<kendo-autocomplete [data]="data" [filterable]="true" (filterChange)="handle($event)"
            [(ngModel)]="selectedValue" placeholder="search with user name">
        </kendo-autocomplete>

        <div class="ps-center  visible-xs">
            <button kendoButton [primary]="true" type="button" (click)="onSearch()">Search</button>
        </div>

如何在选择值时直接转到下一页并跳过再单击一次搜索按钮。

  onSearch() {           
        this.router.navigate(['/story/' + this.userName]);    
  }

【问题讨论】：

标签： angular kendo-ui autocomplete kendo-autocomplete

【解决方案1】：

Kendo-ComboBox 有不同的事件可以根据需要使用，文档可在 Kendo ComboBox

在您的情况下，您可以使用valueChange 事件，如下所示

<kendo-autocomplete [data]="data" [filterable]="true" (filterChange)="handle($event)"
            (valueChange)="valueChange($event)"  [(ngModel)]="selectedValue"
            placeholder="search with user name">
        </kendo-autocomplete>

在您的 .ts 文件中，定义函数

  public valueChange(value: any): void {
    console.log("valueChange", value);
    //perform the manipulation of "value" as required here
        this.router.navigate(['/dashboard/' + value]);

  }

【讨论】：