title: angular 2 typescript kendo auto-complete
body: <p>I want to convert this <a href="https://github.com/jbristowe/kendo-ui-typescript-sample" rel="nofollow">very useful example</a> of a kendo-ui autocomplete in an angular2 app into a proper angular2 web component that I can then export and use in an html page:</p>
  
  <pre><code>$(function () {
  
     var data = [
        "Angular",
        "Kendo UI",
        "TypeScript"
     ];
  
     var input = document.createElement("input");
     input.id = "technologies";
     var technologies = document.body.appendChild(input);
  
     &lt;kendo.ui.AutoComplete&gt;$(technologies).kendoAutoComplete({
        dataSource: data,
        filter: "startswith",
        placeholder: "Select technology...",
        separator: ", "
     }).data("kendoAutoComplete");
  });
  
  
  
  &lt;body&gt;
     &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;  &lt;/script&gt;
     &lt;script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"&gt;&lt;/script&gt;
     &lt;script src="app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
   </p>
  
  <p>This is as far I've got: </p>
  
  <pre><code>/// &lt;reference path="../../typings/jquery/jquery.d.ts" /&gt;
  /// &lt;reference path="../../typings/kendo-all/kendo.all.d.ts" /&gt;
  import {Component, View} from 'angular2/angular2';
  
  @Component({
     selector: 'auto-complete'
  })
  
  @View({
     template: '&lt;input id="autocomplete" /&gt;'
  })
  
  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
  
  }
  </code></pre>