远程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: { 
...