javascript - 如何使用 kendo 控件创建自定义控件并向该控件添加新事件？

Question

如何在kendo-ui中创建自定义控件？例如剑道有自动完成控制。
我想用它来创建我自己的“myAutoComplete”，其中包含剑道提供的所有事件以及一些外部事件。

原因是剑道提供的赛事非常有限。
对于自动完成剑道提供(更改、关闭、数据绑定(bind)、过滤、打开、选择)，但我想添加一些事件，例如(onKeyPress、onMouseOver 等..)。

例如:

我的要求:

    $("#autocomplete").myKendoAutoComplete({
      change: function(e) {
        var value = this.value();
        // Use the value of the widget
      },
     onMouseOver: function() {},
     onKeyPress: function() {}
  });

提供剑道:

 $("#autocomplete").kendoAutoComplete({
          change: function(e) {
            var value = this.value();
            // Use the value of the widget
          }
        });

请任何人帮助我实现这一目标。

Answer 1

就像 jQuery 事件处理一样，我们也可以将事件(如 onKeyPress、onMouseOver 等)绑定(bind)到 kendo-ui 自动完成文本框。

HTML:

 <input id="countries" />

JavaScript:

$(document).ready(function () {
     var data = ["Paris","Barcelona","Tokyo","New-York","Berck"];

    $("#countries").kendoAutoComplete({
        dataSource: data,
        filter: "startswith",
        placeholder: "Select country...",
        separator: ", "
    })
    .keypress(function(e) {
        console.log(e);
        console.log(e.keyCode);
    })
    .mouseover(function(e) {   
        console.log(this.value);   
    });
});

查看此JSFiddle