遠程Kendo自動完成不起作用

Question

我是新來的劍道，並試圖實現Kendo網格列的自定義編輯器，這是一個kendoAutoComplete。

我已成功地從後端獲取數據，啓用了serverFiltering爲true，但最終數據沒有被綁定。

下面是代碼：

自定義編輯器中執行：

$('<input class="auto-mat" data-value-field="MAT" data-bind="value:' + options.field + '"/>') 
      .appendTo(container) 
      .kendoAutoComplete({ 
       autobind: true, 
       suggest: true, 
       filter: "contains", 
       minLength: 3, 
       dataTextField: "DES", 
       dataValueField: "MAT", 
       dataSource: new kendo.data.DataSource({ 
        //serverFiltering: true, 
        transport: { 
         read: { 
          dataType: "odata", 
          url: utils.serverURL() + '&event=SEARCH&field=' + options.field, 
          data: { 
           value: function(){ 
            return $('.auto-mat .k-input').data('kendoAutoComplete').value(); 
           } 
          }         
         }       

        }, 
        schema: { 
         data: function (response) {         
          return response.data; 
         } 
        } 
       }) 
      }); 

而且從後端數據來以這種方式：

{"DATA":[{"MAT":"111","DES":"COAL"},{"MAT":"222","DES":"TEXT1"}]} 

請告訴我在哪裏，我錯了。

Answer 1

鑑於你的數據是在一個名爲DATA（大寫）的元素，你schema.data功能應該是：

data: function (response) {         
    return response.data; 
} 

或者乾脆：

data: "DATA" 

你還應該注意的是，因爲你已經設置minLength到3，直到您輸入3個字符，它將不會將請求發送到服務器以啓動數據。

Answer 2

我很確定你的元素中的data-bind="value:..在這種情況下不會做任何事情，因爲你的元素不是MVVM綁定的。

使用.kendoAutoComplete和MVVM聲明式初始化的程序化小部件初始化在Kendo中是非常不同的事情，並且不會像這樣混合。

您可能想要使用自動完成上的change事件來獲取用戶輸入的值。

---

你可以嘗試這樣的事：

var _value = "Some Value"; 

var _autoCompleteWidget = $('<input class="auto-mat" />') 
     .appendTo(container) 
     .kendoAutoComplete({ 
      autobind: true, 
      suggest: true, 
      filter: "contains", 
      minLength: 3, 
      dataTextField: "DES", 
      dataValueField: "MAT", 
      dataSource: new kendo.data.DataSource({ 
       //serverFiltering: true, 
       transport: { 
        read: { 
         dataType: "odata", 
         url: utils.serverURL() + '&event=SEARCH&field=' + options.field, 
         data: { 
          value: function(){ 
           return $('.auto-mat .k-input').data('kendoAutoComplete').value(); 
          } 
         }         
        }       

       }, 
       schema: { 
        data: function (response) {         
         return response.data; 
        } 
       } 
      }), 
      change: function (changeEvent) { 
       _value = this.value(); // get new value from autocomplete 
      } 
     }).data("kendoAutoComplete"); 

_autoCompleteWidget.value(_value); // set initial value 

，或者你可以做整個事情MVVM，這反而是這樣的：

$('<input class="auto-mat" data-role="autocomplete" data-suggest="true" data-filter="contains" data-min-length="3" data-text-field="DES" data-value-field="MAT" data-bind="source: dataSource, value: value" />') 
    .appendTo(container); 

var viewModel = kendo.observable({ 
    value: "Some Value", 
    dataSource: new kendo.data.DataSource({ 
       //serverFiltering: true, 
       transport: { 
        read: { 
         dataType: "odata", 
         url: utils.serverURL() + '&event=SEARCH&field=' + options.field, 
         data: { 
          value: function(){ 
           return $('.auto-mat .k-input').data('kendoAutoComplete').value(); 
          } 
         }         
        }       

       }, 
       schema: { 
        data: function (response) {         
         return response.data; 
        } 
       } 
      }) 
}); 

kendo.bind(container, viewModel); 

---

，除非有一個kendo.bind()調用你的代碼中的其他地方沒有顯示，然後data-*屬性在第不使用HTML元素。這意味着你的data-bind="value: ..."沒有被使用，這就是爲什麼你的價值沒有更新。

沒有MVVM結合（通過調用kendo.bind()啓用），你需要我爲什麼使用調用.value()得到，並在第一個代碼示例設置的值給自己走動值，這就是生活。

Answer 3

您需要將option.field設置爲輸入名稱，它會自動綁定。

順便說一句，你必須啓用serverFiltering了。它是遠程建議所必需的。

試試這個：

$('<input class="auto-mat" data-value-field="MAT" name="'+ options.field + '"/>...

...  
dataSource: new kendo.data.DataSource({ 
       serverFiltering: true, 
       transport: { 
...