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

Question

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

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

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

Answer 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]);

  }