Kendo-Knockout - 如何将AutoComplete绑定到远程数据？

我使用Kendo-Knockout。Kendo-Knockout - 如何将AutoComplete绑定到远程数据？

我试图让AutoComplete绑定到远程数据。使用http://rniemeyer.github.com/knockout-kendo/web/AutoComplete.html的基本示例我尝试了以下内容。但是，搜索不会更新，直到输入失去焦点。

“搜索”只查找的东西，如果它是已经在observableArray。

Kendo Autocomplete提供的唯一事件是“更改”，该更改仅在输入失去焦点后才会触发。

你将如何拦截按键，并访问search（）的值，以便您可以进行远程调用？

另外，一旦选择了该项目，您将如何访问'id'的值？

感谢杰里米

<strong><p style="margin-top: 100px;" data-bind="text: search"></p></strong> 

<input data-bind="kendoAutoComplete: { data: choices, value: search, 
dataTextField: 'name', valueUpdate: 'afterkeydown' }" /> 

<script type='text/javascript'> 
$(function() { 
    var myViewModel = function() { 
     var self = this; 
     this.choices = ko.observableArray([ 
      { id: "1", name: "apple" }, 
      { id: "1", name: "apple2" }, 
      { id: "1", name: "apple3" }, 
      { id: "2", name: "orange" }, 
      { id: "3", name: "banana" } 
     ]); 

     this.selectedChoice = ko.observable(); 

     self.search = ko.observable(); 

     self.search.subscribe(function() { 
      console.log(self.search()); 
      // would send search to $.ajax to get the remote data 
     }); 
    }; 

    ko.applyBindings(new myViewModel()); 
});

来源

2013-02-13 Jeremy Holt

有可能做这样的事情：

<input data-bind="kendoAutoComplete: { 
        data: {}, 
        minLength: 3, 
        dataTextField: 'Name', 
        dataSource: { 
         type: 'odata', 
         serverFiltering: true, 
         serverPaging: true, 
         pageSize: 20, 
         transport: { 
          read: 'http://odata.netflix.com/Catalog/Titles' 
         } 
        }, 
        value: selectedChoice }" />

您可以在JavaScript对象并指向它，以及存储此。

样品：http://jsfiddle.net/rniemeyer/m8vVA/

来源

2013-02-13 21:49:50

非常感谢这一点 - 我还没有意识到，你可以通过对绑定发送的数据源。但是，现在的问题是如何将Value重新转换为selectedChoice而不是Text。我想出了这个：http://jsfiddle.net/jeremyholt/EVUL9/，但我认为这太可怕了。（我绑定到一个SelectListItem）。有没有更好的方法来做到这一点？ – 2013-02-14 03:43:18

我希望有一个超级优雅的方式来做到这一点，但剑道API并不完美支持它。这是一个稍微干净的方法：http://jsfiddle.net/rniemeyer/Rx6Ux/ – 2013-02-14 16:09:53

以下淘汰赛结合允许在搜索过滤器视图模型中的变化实时更新：

<input data-bind="kendoAutoComplete: 
{ 
    value: value, 
    data: suggestions, 
    filtering: onSuggestionsChanged 
}" />

值是选定值，建议是可观察到的数组，你用结果填充onSuggestionsChanged是视图模型中的一个函数，每次用户更改字段中的文本时都会调用它。

Kendo UI Filter event description

来源

2016-02-19 15:29:10

Kendo-Knockout - 如何将AutoComplete绑定到远程数据？

回答

相关问题