kendo ui自动完成，如何绑定加载数据？

Question

我正在使用带有 mvc 的 kendo ui 自动完成小部件。

我的index.cshtml文件如下，

<div class="filter-value">
    @(Html.Kendo().AutoComplete()
    .Name("InspectorId")
    .DataTextField("RPersonDetails") 
    )
</div>

我不想把数据源放在这里我想用javascript绑定它。

我的javascript代码如下，

wireEvents: function () {

    $("#InspectorId").bind("keyup", function () { AISApp.Page.populateDropDown($(this).val()) });
},


populateDropDown: function (value) {

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: AISApp.Page.getSuburbsURL,
                data: {
                    text: value
                }
            }
        }
    });

  var dd = $('#InspectorId').data("kendoAutoComplete");
dd.setDataSource(dataSource);

},

这行得通，但只是想知道这是正确的方法，还是有一种方法可以不使用 keyup 事件，只使用 kendo 事件？

谢谢

Answer 1

在您的 .cshtml 中，有一种方法可以使用 Kendo 助手通过您的 URL 绑定到 DataSource。然后，您可以让它在按下某个键时自动从 URL 重新读取数据。 基本上，它将您的 javascript keyup 代码移动到帮助程序的代码中。

代码看起来像这个例子：

<div class="filter-value">
    @(Html.Kendo().AutoComplete()
          .Name("InspectorId")
          .DataTextField("RPersonDetails")
          .Filter("contains")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetProducts", "Home")
                      .Data("onAdditionalData");
              })
              .ServerFiltering(true);
          })
    )
</div>
<script>
    function onAdditionalData() {
        return {
            text: $("#InspectorId").val() 
        };
    }
</script>