Kendo 带有外部搜索框和按键的 MVVM

Question

我有一些代码具有 Kendo UI 网格的外部搜索框。它类似于这里的例子 https://telerikhelper.net/2014/10/21/how-to-external-search-box-for-kendo-ui-grid/，但是，它使用 Kendo MVVM 的打字稿。

HTML代码有输入搜索框和按钮class如下

    <div style="display:block;width:100%;padding:5px;">
        <input style="width:70%;height:30px;" id="searchvalue" />
        <button class="km-small" data-icon="search" belongsto="searchvalue" data-role="button" data-bind="events : {click: filterLocations }"></button>
    </div>

按下按钮通过数据绑定连接到 filterLocations() 打字稿函数。我想启用搜索按钮中的回车键来调用 filterLocations() 方法以及单击按钮。

我可以对按键或按键事件采用类似的方法，例如

$("#searchvalue").on("keypress", function(event){               
    if (event.keyCode === 13) {

    }
});

但是，我想使用我在搜索框中键入的文本调用相同的 filterLocations()。

Answer 1

您可以像绑定 click 事件一样绑定 keypress 事件：

<input type="text" class="k-textbox" data-bind="events: { keypress: onKeyPress }"></input>

var viewModel = kendo.observable({
    onKeyPress: function(e){
      console.log(e)
    },
    onClick: function(e) {
      console.log(e);
    }
});

示例：Key press event

Kendo 带有外部搜索框和按键的 MVVM

Kendo MVVM with external search box and keypress

javascript

binding

kendo-ui

kendo-mvvm