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綁定到遠程數據？

回答

相關問題