Question

我想将angular2应用中的kendo-ui自动完成的very useful example转换为适当的angular2 web组件，然后我可以在html页面中导出和使用：

$(function () {

   var data = [
      "Angular",
      "Kendo UI",
      "TypeScript"
   ];

   var input = document.createElement("input");
   input.id = "technologies";
   var technologies = document.body.appendChild(input);

   <kendo.ui.AutoComplete>$(technologies).kendoAutoComplete({
      dataSource: data,
      filter: "startswith",
      placeholder: "Select technology...",
      separator: ", "
   }).data("kendoAutoComplete");
});



<body>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
   <script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
   <script src="app.js"></script>

这就是我所拥有的：

/// <reference path="../../typings/jquery/jquery.d.ts" />
/// <reference path="../../typings/kendo-all/kendo.all.d.ts" />
import {Component, View} from 'angular2/angular2';

@Component({
   selector: 'auto-complete'
})

@View({
   template: '<input id="autocomplete" />'
})

export class AutoComplete extends kendo.ui.AutoComplete {

   // PROPERTIES AND METHODS GO HERE. BUT WHAT ONES?
   // http://docs.telerik.com/KENDO-UI/api/javascript/ui/autocomplete

}

Answer 1

这是一个起点代码示例：

@Component({
   selector: 'auto-complete',
   properties: ['datasource']
})

   export class AutoComplete implements AfterContentInit {
        items: string[];
        selectedValue: string;

        constructor(elelemtRef: ElementRef) {
            var _this = this;
            this.elementRef = elementRef;
            this.filter: "startswith",
            this.placeholder: "Select technology...",
            this.separator: ", "
        }
        afterContentInit() { 
          $(this.elementRef.domElement).kendoAutoComplete(this).data("kendoAutoComplete");
        }
    }

angular 2打字机kendo自动完成

1 个答案: