Example of kendo Autocomplete box in Aurelia

aurelia-kendo-autocomplete.ts

import {inject, customAttribute, bindable} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import * as kendoUi from 'kendo-ui';
import 'kendo-ui/styles/kendo.common-bootstrap.min.css!';
import 'kendo-ui/styles/kendo.bootstrap.min.css!';

@customAttribute('kendo-autocomplete')
@inject(Element, HttpClient)
export class KendoAutocomplete {

    element: HTMLInputElement;
    text: string = "";
    value: any;

    widget: any;
    dataSource: kendo.data.DataSource;

    @bindable read: any;
    @bindable filter: string = "contains";
    @bindable separator: string = "";
    @bindable minLength: number = 2;

    constructor(element) {
        this.element = element;
    }

    valueChanged(newValue) {
        this.widget.value(newValue);
    }

    attached() {

        // Create the datasource
        this.dataSource = new kendoUi.data.DataSource({
            serverFiltering: true,
            transport: {
                read: (options) => {

                    if (!this.read) {
                        console.warn("No read method provided to Kendo Autocomplete");
                        options.error([]);
                        return;
                    }

                    return Promise.resolve(this.read(this.element.value))
                        .then(e => {
                            return options.success(e);
                        })
                        .catch(e => {
                            return options.error([]);
                        });
                }
            }
        });

        // Create the widget
        
        this.widget = $(this.element).kendoAutoComplete({
            dataSource: this.dataSource,
            filter: this.filter,
            separator: this.separator,
            minLength: this.minLength
        });
    }

    detached() {
        $(this.element).data("kendoAutoComplete").destroy();
    }
}