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

Posted 2023-03-05

【中文标题】Angular-Kendo 在更改时自动完成所选值

【英文标题】：Angular-Kendo autocomplete selected value on change

【发布时间】：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]);    
  

【参考方案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]);