Javascript 如何使用剑道控件创建自定义控件并向该控件添加新事件？

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

原因是剑道提供的活动非常有限。
对于自动完成剑道提供（更改、关闭、数据绑定、筛选、打开、选择），但我想添加一些事件，如（onKeyPress、onMouseOver等）

例如：

我的要求：

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

 <input id="countries" />

$(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);   
    });
});

剑道提供：

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

---

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

与jQuery事件处理一样，我们也可以将事件（如onKeyPress、onMouseOver等）绑定到剑道ui自动完成文本框

HTML:

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

 <input id="countries" />

$(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);   
    });
});

---

正如jQuery事件处理一样，我们也可以将事件（如onKeyPress、onMouseOver等）绑定到剑道ui自动完成文本框

HTML:

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

 <input id="countries" />

$(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);   
    });
});

查看此

您可以使用“剑道自定义小部件”，然后使用模板和事件创建自己的小部件

我举了一个例子，你可以根据自己的需要使用它

$(function() {
  (function($) { 
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,

    var MyKendoAutoComplete = Widget.extend({
      init: function(element, options) {
        var that = this;
        Widget.fn.init.call(that, element, options);      
        that._create();
      },
      options: {
        name: "MyKendoAutoComplete",


        onMouseOver: function(e) {
          alert(e.sender.value());
        },
        onKeyPress: function(e) {
          alert(e.sender.value());
        }
      },
      _create: function() {
        var that = this;

         // here you will bind your events 

        kendo.bind(that.element, that.options);
      },
      _templates: {
        //you can create your own templates 

      }
    });

    ui.plugin(MyKendoAutoComplete);
  })(jQuery);

  $('#autocomplete').kendoMyKendoAutoComplete();
});

您可以在此处看到更多信息：

希望此帮助可以帮助您使用“剑道自定义小部件”，然后您可以使用模板和事件创建自己的小部件

我举了一个例子，你可以根据自己的需要使用它

$(function() {
  (function($) { 
    var kendo = window.kendo,
        ui = kendo.ui,
        Widget = ui.Widget,

    var MyKendoAutoComplete = Widget.extend({
      init: function(element, options) {
        var that = this;
        Widget.fn.init.call(that, element, options);      
        that._create();
      },
      options: {
        name: "MyKendoAutoComplete",


        onMouseOver: function(e) {
          alert(e.sender.value());
        },
        onKeyPress: function(e) {
          alert(e.sender.value());
        }
      },
      _create: function() {
        var that = this;

         // here you will bind your events 

        kendo.bind(that.element, that.options);
      },
      _templates: {
        //you can create your own templates 

      }
    });

    ui.plugin(MyKendoAutoComplete);
  })(jQuery);

  $('#autocomplete').kendoMyKendoAutoComplete();
});

您可以在此处看到更多信息：

---

希望这对您有所帮助

谢谢您的回答。就我而言，一切都是动态的。这意味着我正在动态地创建自动完成，并将粒度值传递给它。例如.jQuery（autoCompleteBlockElement）.find（“input”）.kendoAutoComplete（objectAttribute.granularObject）；在这种情况下，如何像jQuery一样绑定。如果我将直接查找，那么它将对所有自动完成控件执行。但我只需要给一些控制权。objectAttribute.granularObject包含“dataSource:data，filter:“StartWith”，占位符：“Select country…”，分隔符：“，”，谢谢您的回答。就我而言，一切都是动态的。这意味着我正在动态地创建自动完成，并将粒度值传递给它。例如.jQuery（autoCompleteBlockElement）.find（“input”）.kendoAutoComplete（objectAttribute.granularObject）；在这种情况下，如何像jQuery一样绑定。如果我将直接查找，那么它将对所有自动完成控件执行。但我只需要给一些控制权。objectAttribute.granularObject包含“dataSource:data，filter:“StartWith”，占位符：“Select country…”，分隔符：“，”@Macro Palma-感谢您的回答。但我需要构建没有小部件的控件API。如果有任何例子，请给我。如果你说“我想创建我自己的myAutoComplete”，当你这样做时，

$（“#autocomplete”）。myKendoAutoComplete({

这意味着你不想让jquery函数来处理你的请求，提出客观的问题。在我的例子中，一切都是动态的。这意味着我在动态地创建自动完成，并向它传递粒度值。例如，jquery（autoCompleteBlockElement）。find（“input”）。kendoAutoComplete（objectAttri‌​bute.granularObject）；在这种情况下，如何像jQuery一样绑定。如果我将直接查找，那么它将对所有自动完成控件执行。但我只需要提供一些控件。objectAttribute.granularObject包含“dataSource:data，filter:“StartWith”，占位符：“Select country…”，分隔符：“，”@Macro Palma-谢谢你的回答。但我需要构建没有小部件的控件API。如果有任何示例，请给我。如果你说“我想创建我自己的myAutoComplete”，当你这样做时，

$（“#autocomplete”）。myKendoAutoComplete({

这意味着你不想让jquery函数来处理你的请求，提出客观的问题。在我的例子中，一切都是动态的。这意味着我在动态地创建自动完成，并向它传递粒度值。例如，jquery（autoCompleteBlockElement）。find（“input”）。kendoAutoComplete（objectAttri‌​bute.granularObject）；在这种情况下，如何像jQuery一样绑定。如果我将直接查找，那么它将对所有自动完成控件执行。但我只需要提供一些控件。objectAttribute.granularObject包含“dataSource:data，filter:“StartWith”，占位符：“Select country…”，分隔符：“，”