I'm using kendo autocomplete search box with dropdown values when user name is keyed in, a backend service is called which results in a list of values and are bind to the search bar.
Now, I'm having a 'search' button to route to next page based on selected value.
<kendo-autocomplete [data]="data" [filterable]="true" (filterChange)="handle($event)"
[(ngModel)]="selectedValue" placeholder="search with user name">
</kendo-autocomplete>
<div >
<button kendoButton [primary]="true" type="button" (click)="onSearch()">Search</button>
</div>
How can I directly route to next page on selection of a value and skip one additional click of search button.
onSearch() {
this.router.navigate(['/story/' this.userName]);
}
CodePudding user response:
Kendo-ComboBox has different events which can be used as required,documentation is available at Kendo ComboBox
In your case, you can use valueChange
event as below
<kendo-autocomplete [data]="data" [filterable]="true" (filterChange)="handle($event)"
(valueChange)="valueChange($event)" [(ngModel)]="selectedValue"
placeholder="search with user name">
</kendo-autocomplete>
In your .ts file, define the function
public valueChange(value: any): void {
console.log("valueChange", value);
//perform the manipulation of "value" as required here
this.router.navigate(['/dashboard/' value]);
}