Is there any alternative in kendo anutocomplete for bind valueField and textField

Question

<kendo-autocomplete class="text-box" [data]="filterCustomer"[filterable]="true" (filterChange)="customerTextChange($event)" (valueChange)="onCustomerSelectionChange($event)" formControlName="customerId"[valueField]="'id'"[textField]="'name'">
    <ng-template kendoAutoCompleteItemTemplate kendoAutoCompleteValueTemplate let-dataItem>
        <span>[{{dataItem.account}}] {{ dataItem.name}}</span>
    </ng-template>
</kendo-autocomplete>

In this code there is a problem textField is not supported so to bind the text in autocomplete on basis of id.

Answer 1

The Kendo AutoComplete component has a limited alternative for textField which is using the kendoAutoCompleteItemTemplate directive on a ng-template element.

The kendoAutoCompleteItemTemplate directive allows you to define how you want your data items to look and what data you want them to display in the list.

However, once the AutoComplete component's list is closed, the text field will display the valueField value of the item that was selected and there is no way to change this behavior out-of-the-box.

@Component({
    selector: 'my-app',
    template: `
        <kendo-autocomplete [data]="listItems"
                            [valueField]="'text'"
                            [placeholder]="'e.g. Andorra'"
                            (valueChange)="currentValue = $event">
            <ng-template kendoAutoCompleteItemTemplate let-dataItem>
                <span style="color: #00F;">{{ dataItem.value }}</span>
            </ng-template>
        </kendo-autocomplete>
    `
})
class AppComponent {
    public currentValue;

    public listItems: Array<{ text: string, value: string }> = [
        { text: "Albania", value: "Alb" },
        { text: "Andorra", value: "And" },
        { text: "Armenia", value: "Arm" },
        { text: "Austria", value: "Aus" },
        { text: "Azerbaijan", value: "Aze" }
    ];
}