Angular-Kendo 在更改時自動完成所選值

Question

我正在使用帶有下拉值的劍道自動完成搜索框 當輸入用戶名時，會調用一個后端服務，該服務會生成一個值列表並綁定到搜索欄。

現在，我有一個“搜索”按鈕，可以根據所選值路由到下一頁。

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

在 your.ts 文件中，定義 function

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

  }