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

Question

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

现在，我有一个 'search' 按钮可以根据所选值转到下一页。

<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-组合框有不同的事件可以根据需要使用，文档可在 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]);

  }

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

Angular-Kendo autocomplete selected value on change

angular

kendo-ui

autocomplete

kendo-autocomplete