Angular2 Autocomplete for complex objects

[Niels]

Hello everyone,

right now the Angular2 AutoComplete compontent only supports string values, which is not sufficent in a scenario, where you want to find for example a customer based on his name. There could be multiple entities with the same name, but I also do not want to display the database id to the user. So what to do?

I hope, that this will get implemented in the AutoComplete Component soon, but for now this is my workaround I would like to share:

1. You have to modify the autocomplete.component.js so it will accept complex objects without throwing an exception. 
Remove the if statement from lines 315-317: 

if (util_1.isPresent(newValue) && typeof newValue !== "string") {
            throw new Error("Expected value of type string. See http://www.telerik.com/kendo-angular- ;           ui/components/dropdowns/autocomplete/#toc-value");
}

 

Remove the first "toLowerCase()" call from line 426, so it should look like this:

else if (text && text === this.searchbar.value.toLowerCase()) {

 

And that is it. You can now pass an Array of customers to as [data]

<kendo-autocomplete #customersAutocomplete
                    [data]="customers"
                    [(ngModel)]="selectedCustomer"
                    [suggest]="false"
                    [filterable]="true"
                    (filterChange)="customerTextChange($event)">
    <template kendoAutoCompleteItemTemplate let-dataItem>
            <span>{{dataItem.firstName}} {{ dataItem.lastName}}</span><br />
            <span>{{dataItem.birthDateLocal}}</span><br />
            <span>{{dataItem.customerNumber}}</span><br />
        </div>
    </template>
</kendo-autocomplete>
<button *ngIf="customersAutocomplete.value"
        (click)="selectedCustomer=null; customersAutocomplete.value=null;">x
</button>

 

However there are some things you have to be aware of:

When you select a value from the AutoComplete there will be two consecutive value changes. First will be your complex object, the second will be the string representation (customer.toString()). So I recommend, that you use a setter on your ngModel:

public set selectedCustomer(value: Customer) {
        if (!value || value instanceof Customer) {
            this._selectedCustomer= value;
        }
    }

 

You also should write a toString() on your model, that you can display to the user.

I hope this helps some people and maybe serves as a suggestion for the Telerik guys.

 

[Alexander Valchev]

Hello Jan,

Thank you for getting in touch with us.

The AutoComplete component is designed to behave like a text input with auto-completion.

In case your business logic requires information from the selected dataItem, such as the ID of the customer, you should use a ComboBox (with enabled suggest feature) instead of AutoComplete.

Do you think that this will be a suitable solution for you? If not, could you please give us more details about the key features that the ComboBox does not provide in your scenario?

Regards,
Alexander Valchev
Telerik by Progress

[Niels]

Hi Alexander, 

thank you for your reply. Seems like I missed the suggest feature of the ComboBox, so I will give this a try and report back if something is missing.