or
declare module "k/kendo.autocomplete.min" {
export var load;
}
declare module "k/kendo.menu.min" {
export var load;
}
<script type=
"text/javascript"
>
require.config({
paths: {
app:
'/Scripts/app'
,
}
});
require([
'app/index'
],
function
(i) {
new
i.index();
});
</script>
import kendoConstant = require('app/kendoConstant');
import kendoMenuScript = require('k/kendo.menu.min');
import kendoAutoCompleteScript = require("k/kendo.autocomplete.min");
export class index {
private _menuElement: JQuery;
private _searchButtonElement: JQuery;
private _searchBoxElement: JQuery;
private _searchDataSource: kendo.data.DataSource;
private _searchBox: kendo.ui.AutoComplete;
private _searchAutocompleteMinLength: number;
constructor() {
kendoMenuScript; //necessary reference so the k/kendo.menu.min will be in the generated require statement
kendoAutoCompleteScript; //necessary reference so the k/kendo.autocomplete.min will be in the generated require statement
this._searchAutocompleteMinLength = 3;
this._menuElement = $("#menu")
this._searchBoxElement = $("#searchBox");
this._searchButtonElement = $("#searchButton");
this._menuElement.kendoMenu();
this._menuElement.show();
this._searchDataSource = this.createSearchDataSource();
this._searchBox = this.createAutoComplete();
this._searchBoxElement.keydown((e) => {
if (e.which == kendo.keys.ENTER) {
this.processSearch();
}
});
this._searchButtonElement.click(() => this.processSearch());
}
private createSearchDataSource(): kendo.data.DataSource {
return new kendo.data.DataSource({
data: [
{ "id": 1, "name": "John Doe" },
{ "id": 2, "name": "John Smith" },
{ "id": 3, "name": "Jane Doe" },
{ "id": 4, "name": "Johnny Appleseed" },
{ "id": 5, "name": "Joan Maryland" },
{ "id": 6, "name": "Johan Brown" }
]
});
}
private createAutoComplete(): kendo.ui.AutoComplete {
return this._searchBoxElement.kendoAutoComplete({
dataSource: this._searchDataSource,
placeholder: "Search...",
minLength: this._searchAutocompleteMinLength,
filter: "startswith",
dataTextField: "name",
suggest: true,
}).data(kendoConstant.kendoAutoComplete);
}
private processSearch() {
var value = this._searchBox.value();
if (value != "") {
alert(value + " would be searched for...");
}
}
}