8

使用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) } });

但是由于所有这些工作的方式，没有设置“选择器”来获取自动完成输入，所以我无法从输入表单元素中检索它的值。

4

4 回答 4

13

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

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;
                }
            }
        }
    }
});
于 2013-09-20T22:51:03.290 回答
6

DataSource我认为对和之间的关系存在误解AutoComplete。AutoComplete具有inputand 使用 aDataSource来检索数据： theinput不属于 theAutoComplete并且因此您无法从(as或)的方法中获取input使用 a的 that。DataSourceDataSourcetransport.read.datatransport.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 }
                }
            }
        }
    }
});
于 2013-09-20T22:44:27.023 回答
5

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

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect",
                data: { term: "value" }
            }
        }
    }
})
于 2013-09-20T21:54:41.463 回答
0

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

$("#contractsSearchField").kendoComboBox({
    dataTextField: "name",
    dataValueField: "id",
    autoBind: false,
    placeholder:'select...',
    filter: "contains",// a filter must be present for the datasources serverFiltering argument to work properly.
    minLength: 3,
    dataSource: new kendo.data.DataSource({ 
        serverFiltering: true,//We must turn on serverFiltering and sorting, otherwise, the combobox only works once and will not change it's values.
        serverSorting: true,
        group: { field: "searchtype" },
        transport: {
            read: {
                url: "contract.cfc?method=getContractForDropdown",
                // We are not passing the data here like we do in the autosuggest. The combobox is a different type of an animal.
                dataType: "json",  
                contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.                 
                type: "GET"
            },//read
            // Pass the search term that was typed in by the user. This works because when the user types into the input box, it becomes that active element in the form.
            parameterMap : function (data, type) {
                if (type === "read") {
                    return { searchTerm : document.activeElement.value }
                    //return { searchTerm: data.filter.filters[0].value }
                }
            }//parameterMap
        }//transport
    })//dataSource
}); //...kendoComboBox...
于 2016-07-15T21:25:47.243 回答