Question

使用 Kendo UI ，我正在使用自动填充框尝试从我的服务器检索数据。它使用以下签名命中 ASP.NET MVC 控制器。

public ActionResult aspect(string term){
   // ...
}

这意味着请求需要在url中包含正确的参数。现在我遇到的问题是我无法找到在 dataSource 机制中指定它的方法。我已经阅读了很多次 parameterMap 的文档，这对我来说完全没有任何意义。

由于所涉及的页面在任何时候实际上都有10-15个自动完成文本框，每个动态创建的动态标识文本框都会进一步复杂化。

我目前使用的代码如下：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            }
        }
    }
});

那么我可以做些什么来告诉它如何命名它传递的参数？

为了更清楚我想要做什么，如果我在 jQuery 中这样做，我会用......

$.ajax({ url: '/search/aspects', data: { term: (insert the data here) } });

但是由于所有这些都有效，所以没有设置“selector”来获取自动完成输入，所以我无法从输入表单元素中检索它的值。

Answer 1

首先，通过设置此选项启用服务器端过滤：

dataSource: {
    serverFiltering: true,

然后将值作为其中一个参数传递给transport.parameterMap函数。

如果要将传入的对象记录到parameterMap函数中，如下所示：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        serverFiltering: true,
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            },
            parameterMap: function (data, action) {
                console.log(data);
            }
        }
    }
});

然后你会得到一个看起来像这样的对象：

{
    "filter":{
        "logic":"and",
        "filters":[
            {
                "value":"something",
                "operator":"contains",
                "field":"Name",
                "ignoreCase":true
            }
        ]
    }
}

因此，您可以使用此方法通过执行以下操作将输入的值输入到“自动完成”框中：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        serverFiltering: true,
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            },
            parameterMap: function (data, action) {
                if(action === "read") {
                    return {
                        term: data.filter.filters[0].value
                    };
                } else {
                    return data;
                }
            }
        }
    }
});

Answer 2

我认为对DataSource和AutoComplete之间的关系存在误解。 AutoComplete有input并使用DataSource来检索数据：input不属于AutoComplete，因此您无法获取input 1}}正在使用来自DataSource（作为DataSource或transport.read.data）的方法中的transport.parameterMap。

您需要唯一标识哪个元素具有输入及其包含的值。

我建议使用document.activeElement.value获取价值。由于您正在键入它，因此具有焦点的元素应该是您正在使用的元素。

代码如下：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect",
            },
            parameterMap : function (data, type) {
                if (type === "read") {
                    return { term : document.activeElement.value }
                }
            }
        }
    }
})

或者，您可以启用serverFiltering，然后Kendo UI会将input字段与过滤条件相关联。代码是：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource   : {
        serverFiltering: true,
        type           : "json",
        transport      : {
            read        : {
                url : "/search/aspect"
            },
            parameterMap: function (data, type) {
                if (type === "read") {
                    return { term : data.filter.filters[0].value }
                }
            }
        }
    }
});

Answer 3

我对你想要做的事感到有点困惑。如果您只是尝试将字符串术语传递给控制器，则可以指定数据：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect",
                data: { term: "value" }
            }
        }
    }
})

Answer 4

感谢OnaBai的澄清和帮助。这是我经过数小时挫折后工作的代码！

setup()

Kendo UI - 在dataSource读取时指定参数名称

4 个答案: